/* Inmobiliaria Sotomayor — capa sobre el tema original.
   Repinta el acento y arregla los defectos del sitio que clonamos. */

:root {
  --sm-tinta: #26303a;
  --sm-bronce: #3c7aa1;
  --sm-bronce-osc: #356a8c;
}

/* ── acento: donde el original usaba naranjo/celeste, va bronce ─────────── */
.btn-primary, .btn-primary:focus,
.bg-primary, .box_operation, .label-primary,
.btn__esp__bodegas, .pagination > .active > a, .pagination > .active > span,
.thumb-info .thumb-info-action-icon, .featured-box .icon-featured,
input[type=submit].btn-primary {
  background-color: var(--sm-bronce) !important;
  border-color: var(--sm-bronce) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn__esp__bodegas:hover,
.pagination > li > a:hover {
  background-color: var(--sm-bronce-osc) !important;
  border-color: var(--sm-bronce-osc) !important;
}
a, .text-primary, .btn-link { color: var(--sm-tinta); }
a:hover { color: var(--sm-bronce); }
.btn-danger, .btn-danger:focus { background-color: var(--sm-tinta) !important; border-color: var(--sm-tinta) !important; }
.header-nav-bar-primary, .header-nav-bar { background-color: var(--sm-tinta) !important; }
.section-primary, .section-footer, footer, .footer { background-color: var(--sm-tinta) !important; }
.btn-Operacion.active, .btn-group .btn-Operacion.active {
  background-color: var(--sm-tinta) !important; border-color: var(--sm-tinta) !important; color: #fff !important;
}

/* ── arreglo 1: el original se desbordaba a lo ancho en el teléfono ─────── */
html, body { overflow-x: hidden; max-width: 100%; }
img, iframe, video, table { max-width: 100%; }
.owl-carousel, .owl-stage-outer { overflow: hidden !important; }

@media (max-width: 767px) {
  /* ── arreglo 2: las tarjetas van de a dos, no apiladas ───────────────── */
  .property-list .col-lg-4,
  .property-list .col-md-6,
  .property-list .col-sm-6,
  .property-list .col-xs-12,
  .secDestacadas .col-md-3,
  .secDestacadas .col-sm-6,
  .secDestacadas .col-xs-12 {
    width: 50% !important;
    float: left !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .boxes .title, .boxes h2.title { font-size: 14px !important; line-height: 1.25 !important; }
  .boxes .btn-danger { font-size: 12px !important; padding: 3px 7px !important; }
  .boxes_img { height: auto !important; }
  .boxes_img img { width: 100% !important; height: auto !important; }

  /* ── arreglo 3: menos largo vertical ─────────────────────────────────── */
  .section { padding: 26px 0 !important; }
  .mt-xl, .mb-xl { margin-top: 14px !important; margin-bottom: 14px !important; }
  .pt-xl, .pb-xl { padding-top: 14px !important; padding-bottom: 14px !important; }
  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
}

/* ── arreglo 4: el modal del equipo quedaba vacío en el original ───────── */
#perfil_Modal .modal-body:empty::after,
#perfilModal:empty::after {
  content: 'Ficha en preparación.';
  display: block; padding: 24px; color: #777; text-align: center;
}
#perfilModal img[src$="#"] { display: none; }

/* ── botón flotante de WhatsApp, y que no tape el crédito del pie ──────── */
.sm-wsp {
  position: fixed; right: 16px; bottom: 16px; z-index: 900;
  display: inline-flex; align-items: center; gap: 9px;
  background: #25d366; color: #fff !important;
  padding: 12px 16px; border-radius: 999px; font-weight: 600; font-size: 13px;
  box-shadow: 0 6px 22px rgba(37, 211, 102, .42);
  text-decoration: none !important;
}
.sm-wsp:hover { background: #1fb457; color: #fff !important; }
.sm-wsp svg { flex: 0 0 auto; }
@media (max-width: 767px) { .sm-wsp span { display: none; } .sm-wsp { padding: 13px; } }
footer, .section-footer { padding-bottom: 92px !important; }

/* ══ ARREGLOS MÓVILES sobre el markup real del tema ══════════════════════ */
@media (max-width: 767px) {
  /* 1. los carruseles pasan a grilla de dos columnas: sin arrastrar de lado */
  .secDestacadas .owl-carousel .owl-stage-outer,
  .carousel-clientes2 .owl-carousel .owl-stage-outer,
  .secDestacadas .owl-stage-outer { overflow: visible !important; }

  .secDestacadas .owl-stage,
  .carousel-clientes2 .owl-stage {
    width: 100% !important;
    transform: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
  }
  .secDestacadas .owl-item,
  .carousel-clientes2 .owl-item {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    margin: 0 !important;
    padding: 0 5px 10px !important;
  }
  .secDestacadas .owl-nav, .secDestacadas .owl-dots,
  .carousel-clientes2 .owl-nav, .carousel-clientes2 .owl-dots { display: none !important; }

  /* 2. en el teléfono bastan 8 destacadas: el resto está en el listado */
  .secDestacadas .owl-item:nth-child(n + 9) { display: none !important; }
  .carousel-clientes2 .owl-item:nth-child(n + 9) { display: none !important; }

  /* 3. el carrusel de casos de éxito: uno debajo del otro, sin desbordar */
  .carousel-clientes .owl-stage-outer, .owl-carousel .owl-stage-outer { overflow: hidden !important; }

  /* 4. nada se sale del ancho de la pantalla */
  .row { margin-left: 0 !important; margin-right: 0 !important; }
  .container, .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
  [class*='col-'] { padding-left: 5px !important; padding-right: 5px !important; }

  /* 5. menos largo vertical */
  .section, section.section { padding-top: 22px !important; padding-bottom: 22px !important; }
  .mt-xl, .mt-lg { margin-top: 12px !important; }
  .mb-xl, .mb-lg { margin-bottom: 12px !important; }
  .pt-xl, .pt-lg { padding-top: 12px !important; }
  .pb-xl, .pb-lg { padding-bottom: 12px !important; }
  .slider-contact-form { padding: 10px 0 !important; }
  .boxes { margin-bottom: 0 !important; }
}

@media (max-width: 767px) {
  /* casos de éxito: el carrusel clonaba las tarjetas y estiraba la página */
  .owl-casos-index .owl-item.cloned { display: none !important; }
  .owl-casos-index .owl-item {
    width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
  }
  .owl-casos-index .owl-item:nth-child(n + 4) { display: none !important; }
  .owl-casos-index .owl-stage { display: flex !important; flex-wrap: wrap !important; transform: none !important; width: 100% !important; }
  .owl-casos-index .owl-nav, .owl-casos-index .owl-dots { display: none !important; }
}

/* ══ SCROLL ══════════════════════════════════════════════════════════════
   El tema movía la cabecera con JavaScript al hacer scroll y se sentía a
   saltos. Se desactiva ese comportamiento y la barra de menú queda fija con
   CSS, que es fluido. `overflow-x: clip` en vez de `hidden` para no romper
   el posicionamiento pegajoso. */
html { overflow-x: visible !important; scroll-padding-top: 70px; }
body { overflow-x: clip !important; }

#header .header-nav-bar {
  position: sticky;
  top: 0;
  z-index: 1001;
}
/* la cabecera no debe reservar alto ni saltar */
#header.sticky-header-active .header-body,
#header .header-body { position: static !important; transform: none !important; }
body.sticky-header-active { padding-top: 0 !important; }

/* sin transiciones de alto en la cabecera al hacer scroll */
#header .header-logo img { transition: none !important; }

/* el botón "volver arriba" del tema, suave */
html { scroll-behavior: auto; }


/* @sm-ficha */
/* ═══ página de propiedad ═══════════════════════════════════════════════ */
/* La ficha del tema traía además una versión imprimible completa, que se veía
   en pantalla como una franja oscura suelta bajo el contenido. Se reserva
   para el papel, que es para lo que estaba hecha. */
.section__ficha__imprimible, .footer__ficha__imprimible { display: none; }
/* Impresión de la ficha.
   Antes decía: esconder .sm-ficha y mostrar .section__ficha__imprimible, que
   era la versión para imprimir del tema clonado. Ese bloque ya no existe en
   el sitio, así que imprimir una propiedad daba una hoja casi en blanco: se
   ocultaba lo único que había. Ahora se imprime la ficha misma y lo que se
   esconde es el decorado. */
@media print {
  .sm-ficha { display: block; }
  .footer__ficha__imprimible { display: none; }

  /* fuera todo lo que no es la propiedad */
  #header, .sm-pie, footer, .oculto-impresion,
  .sm-wsp, .scroll-to-top, .sm-probador, .sm-saltar,
  .sm-volver, .breadcrumb, .sm-mapa-ficha, .sm-similares,
  .sm-ficha-acciones, .sm-recorrido--video { display: none !important; }

  .sm-ficha-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .sm-ficha-cabecera { padding: 0 0 12px !important; background: none !important; }
  .sm-ficha-cuerpo { padding: 12px 0 0 !important; }
  .sm-ficha-foto { max-height: 8cm; }
  .sm-ficha-foto img { max-height: 8cm; object-fit: cover; }
  .sm-galeria-tira { overflow: hidden !important; }
  .sm-galeria-foto:not(:first-child), .sm-galeria-cuenta, .sm-galeria-flecha, .sm-visor, .sm-miniaturas-fila { display: none !important; }

  /* el panel de contacto sí se imprime: es lo que el cliente va a llamar */
  .sm-panel { break-inside: avoid; border: 1px solid #999 !important; }

  /* la dirección de la página, para volver a ella desde el papel */
  .sm-ficha-titulo::after {
    content: " — inmobiliariasotomayor.cl";
    font-size: 11pt; font-weight: 400; color: #555;
  }
}
.sm-ficha { background: #fff; }
/* llamado a cotizar al final de la ficha */
.sm-cotiza-final {
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  border: 1px solid var(--sm-linea); border-radius: var(--sm-radio);
  background: var(--sm-superficie); padding: 22px 24px; margin: 34px 0 0;
}
.sm-cotiza-final h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--sm-tinta); margin: 0 0 6px; }
.sm-cotiza-final p { margin: 0; font-size: 14px; color: var(--sm-ink-suave); max-width: 60ch; }
.sm-cotiza-final-botones { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 575px) {
  .sm-cotiza-final { padding: 16px; }
  .sm-cotiza-final-botones { width: 100%; }
  .sm-cotiza-final-botones .sm-boton { flex: 1 1 100%; justify-content: center; }
}
.sm-ficha-cabecera { background: var(--sm-superficie); border-bottom: 1px solid var(--sm-linea); padding: 22px 0 26px; }
.sm-volver { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--sm-ink-suave) !important; margin-bottom: 14px; }
.sm-volver:hover { color: var(--sm-tinta) !important; }
.sm-ficha-cabecera-fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sm-ficha-titulo { font-size: clamp(24px, 1.4rem + 1.4vw, 34px); margin: 0 0 8px; color: var(--sm-tinta); }
.sm-ficha-lugar { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--sm-ink-suave); font-size: 14px; }
.sm-ficha-lugar svg { width: 15px; height: 15px; color: var(--sm-bronce-texto); }
.sm-ficha-rapidos { display: flex; flex-wrap: wrap; gap: 14px 26px; }
.sm-dato { display: flex; align-items: center; gap: 10px; }
.sm-dato-ico { display: inline-flex; width: 34px; height: 34px; border-radius: var(--sm-radio); background: #fff; border: 1px solid var(--sm-linea); align-items: center; justify-content: center; }
.sm-dato-ico svg { width: 17px; height: 17px; color: var(--sm-bronce-texto); }
.sm-dato b { display: block; font-size: 14px; font-weight: 600; color: var(--sm-tinta); letter-spacing: -0.01em; }
.sm-dato i { font-style: normal; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sm-ink-suave); }

.sm-ficha-cuerpo { padding-top: 34px; padding-bottom: 54px; }
.sm-ficha-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 34px; align-items: start; }
.sm-ficha-col { min-width: 0; }
.sm-ficha-foto { margin: 0 0 26px; border-radius: var(--sm-radio); overflow: hidden; border: 1px solid var(--sm-linea); }
.sm-ficha-foto img { display: block; width: 100%; height: 420px; object-fit: cover; object-position: 50% 62%; }
/* Varias fotos: tira que se desliza con el dedo (scroll-snap, sin
   JavaScript) y, con mouse, flechas y avance solo. Las fotos se ven ENTERAS
   (contain): recortadas a la altura del marco, de una bodega se veía sólo el
   suelo. */
.sm-galeria { position: relative; background: #1a222a; }
.sm-galeria-tira { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.sm-galeria-tira::-webkit-scrollbar { display: none; }
.sm-galeria-foto {
  flex: 0 0 100%; scroll-snap-align: start; display: block; padding: 0; margin: 0;
  border: none; background: transparent; cursor: zoom-in;
}
.sm-galeria-foto img { display: block; width: 100%; height: 420px; object-fit: contain; object-position: 50% 50%; }
.sm-galeria-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--sm-tinta);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.25); transition: background .15s ease;
}
.sm-galeria-flecha:hover { background: #fff; }
.sm-galeria-flecha svg { width: 20px; height: 20px; }
.sm-galeria-flecha--antes { left: 12px; }
.sm-galeria-flecha--despues { right: 12px; }
.sm-galeria-cuenta { position: absolute; right: 12px; bottom: 12px; background: rgba(26, 34, 42, .78); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px; pointer-events: none; }

/* ── miniaturas y planos bajo la foto grande ─────────────────────────── */
.sm-fotos { margin: 0 0 26px; }
.sm-fotos .sm-ficha-foto { margin-bottom: 10px; }
.sm-miniaturas-fila { display: flex; align-items: center; gap: 10px; }
.sm-miniaturas {
  display: flex; gap: 8px; overflow-x: auto; flex: 1 1 auto; min-width: 0;
  padding: 2px; scrollbar-width: thin;
}
.sm-miniatura {
  flex: 0 0 auto; width: 84px; height: 62px; padding: 0; border: 2px solid transparent;
  border-radius: 5px; overflow: hidden; background: #e9ecef; cursor: pointer; opacity: .72;
  transition: opacity .15s ease, border-color .15s ease;
}
.sm-miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-miniatura:hover { opacity: 1; }
.sm-miniatura.activa { border-color: var(--sm-bronce); opacity: 1; }
.sm-ver-planos {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  height: 62px; padding: 0 16px; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--sm-tinta); background: var(--sm-tinta); color: #fff;
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.sm-ver-planos:hover { background: #fff; color: var(--sm-tinta); }
.sm-ver-planos svg, .sm-plano-pie svg { width: 20px; height: 20px; }
.sm-plano-tarjeta {
  display: block; width: 100%; padding: 0; border: 1px solid var(--sm-linea); border-radius: var(--sm-radio);
  background: #fff; cursor: zoom-in; overflow: hidden; position: relative; text-align: left;
}
.sm-plano-tarjeta img { display: block; width: 100%; max-height: 420px; object-fit: contain; background: #fff; padding: 12px; }
.sm-plano-pie {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--sm-linea);
  font-size: 14px; font-weight: 600; color: var(--sm-tinta); background: var(--sm-superficie);
}
.sm-plano-tarjeta:hover .sm-plano-pie { background: #fff; }
/* los planos se ven sobre blanco (son dibujos), no sobre el fondo oscuro */
.sm-visor[data-sm-visor="plano"] .sm-visor-fotos img { background: #fff; border-radius: 4px; }
@media (max-width: 575px) {
  .sm-miniatura { width: 64px; height: 48px; }
  .sm-ver-planos { height: 48px; padding: 0 12px; font-size: 12.5px; }
}

/* ── visor a pantalla completa ────────────────────────────────────────── */
.sm-visor { position: fixed; inset: 0; z-index: 3000; }
.sm-visor[hidden] { display: none; }
.sm-visor-fondo { position: absolute; inset: 0; background: rgba(8, 12, 16, .93); }
.sm-visor-caja { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 56px 16px 52px; }
.sm-visor-fotos { max-width: 100%; max-height: 100%; display: flex; }
.sm-visor-fotos img { max-width: min(1400px, 96vw); max-height: calc(100vh - 110px); width: auto; height: auto; object-fit: contain; }
.sm-visor-x, .sm-visor-flecha {
  position: absolute; border: none; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.12); border-radius: 50%;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
}
.sm-visor-x:hover, .sm-visor-flecha:hover { background: rgba(255,255,255,.24); }
.sm-visor-x { top: 14px; right: 14px; }
.sm-visor-x svg, .sm-visor-flecha svg { width: 22px; height: 22px; }
.sm-visor-flecha--antes { left: 14px; top: 50%; transform: translateY(-50%); }
.sm-visor-flecha--despues { right: 14px; top: 50%; transform: translateY(-50%); }
.sm-visor-pie { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: #cfd6dd; font-size: 13px; margin: 0; }
/* lupa: la foto se acerca dentro de su propio marco y sigue al mouse */
.sm-visor-fotos { overflow: hidden; border-radius: 4px; }
.sm-visor-fotos img { cursor: zoom-in; transition: transform .18s ease-out; will-change: transform; }
.sm-visor--zoom .sm-visor-fotos img { cursor: zoom-out; transition: transform .08s linear; }
.sm-visor-lupa { position: absolute; top: 14px; left: 14px; display: flex; gap: 8px; z-index: 2; }
.sm-visor-lupa button {
  width: 44px; height: 44px; border: none; border-radius: 50%; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center;
}
.sm-visor-lupa button:hover { background: rgba(255,255,255,.24); }
.sm-visor-lupa svg { width: 22px; height: 22px; }
.sm-visor-x, .sm-visor-flecha { z-index: 2; }
.sm-visor-ayuda { display: block; font-size: 12px; color: #9aa6b2; margin-bottom: 3px; }
@media (max-width: 575px) { .sm-visor-lupa button { width: 38px; height: 38px; } }
@media (max-width: 767px) {
  .sm-galeria-foto img { height: 300px; }
  .sm-visor-caja { padding: 56px 8px 46px; }
  .sm-visor-flecha { width: 38px; height: 38px; }
}

/* ── panel lateral ────────────────────────────────────────────────────── */
.sm-panel { position: sticky; top: 118px; }
.sm-panel-caja { border: 1px solid var(--sm-linea); border-radius: var(--sm-radio); padding: 22px; background: #fff; }
.sm-panel-op {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: #fff; background: var(--sm-tinta);
  padding: 5px 10px; border-radius: 4px; margin-bottom: 14px;
}
.sm-panel-precio { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--sm-tinta); margin: 0; }
.sm-panel-alterno { font-size: 13px; color: var(--sm-ink-suave); margin: 4px 0 0; }
.sm-panel-datos { margin: 18px 0 20px; padding: 16px 0 0; border-top: 1px solid var(--sm-linea); }
.sm-panel-datos > div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; }
.sm-panel-datos dt { font-size: 12.5px; font-weight: 400; color: var(--sm-ink-suave); }
.sm-panel-datos dd { margin: 0; font-size: 13px; font-weight: 600; color: var(--sm-tinta); text-align: right; }
.sm-codigo { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: .02em; }
.sm-panel-cta { width: 100%; }
.sm-panel-formulario { margin-top: 8px; }
.sm-panel-secundarios { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.sm-panel-secundarios .sm-boton { padding: 10px 12px; font-size: 13px; }
.sm-panel-nota { font-size: 11.5px; line-height: 1.6; color: var(--sm-ink-suave); margin: 16px 0 0; }
.sm-panel-nota strong { color: var(--sm-tinta); font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; }

/* ── recorrido (reemplaza el video ajeno) ─────────────────────────────── */
.sm-recorrido { border: 1px solid var(--sm-linea); border-radius: var(--sm-radio); overflow: hidden; margin-bottom: 26px; }
.sm-recorrido-marco { position: relative; aspect-ratio: 16 / 9; background: var(--sm-negro); }
.sm-recorrido-marco img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) brightness(.6); }
.sm-recorrido-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sm-recorrido-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,20,25,.25), rgba(15,20,25,.72)); }
.sm-recorrido-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.sm-play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 66px; height: 46px; border-radius: 12px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34);
  backdrop-filter: blur(2px);
}
.sm-play svg { width: 26px; height: 26px; color: #fff; }
.sm-recorrido-estado {
  margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: #fff;
  border: 1px solid rgba(255,255,255,.34); border-radius: 999px; padding: 5px 14px;
}
.sm-recorrido-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.2); }
.sm-recorrido-barra span { display: block; width: 0; height: 100%; background: var(--sm-bronce); }
.sm-recorrido-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; padding: 18px 20px; background: #fff;
}
.sm-recorrido-titulo { font-size: 17px; margin: 0 0 4px; color: var(--sm-tinta); }
.sm-recorrido-pie p { margin: 0; font-size: 13.5px; color: var(--sm-ink-suave); }

/* ── bloques de contenido ─────────────────────────────────────────────── */
.sm-bloque { margin-bottom: 30px; }
.sm-bloque-titulo { font-size: 19px; color: var(--sm-tinta); margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--sm-linea); }
.sm-bloque-bajada { font-size: 13.5px; color: var(--sm-ink-suave); margin: 12px 0 0; }
.sm-bloque p { line-height: 1.8; color: var(--sm-ink); margin: 14px 0 0; }
.sm-etiquetas { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-etiquetas span {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sm-bronce-texto); background: color-mix(in srgb, var(--sm-bronce) 8%, #fff); border: 1px solid color-mix(in srgb, var(--sm-bronce) 24%, #fff);
  border-radius: 999px; padding: 5px 12px;
}
.sm-detalles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.sm-detalle { border: 1px solid var(--sm-linea); border-radius: var(--sm-radio); padding: 16px 18px; background: var(--sm-superficie); }
.sm-detalle .sm-etiqueta { color: var(--sm-bronce-texto); margin-bottom: 10px; }
.sm-detalle ul { list-style: none; margin: 0; padding: 0; }
.sm-detalle li { font-size: 13.5px; line-height: 1.7; color: var(--sm-ink); padding-left: 14px; position: relative; }
.sm-detalle li::before { content: ''; position: absolute; left: 0; top: 10px; width: 5px; height: 1px; background: var(--sm-bronce); }

.sm-tabla { width: 100%; margin-top: 18px; border-collapse: collapse; }
.sm-tabla th, .sm-tabla td { padding: 11px 14px; font-size: 13.5px; text-align: left; border-bottom: 1px solid var(--sm-linea); }
.sm-tabla th { font-weight: 400; color: var(--sm-ink-suave); width: 42%; }
.sm-tabla td { font-weight: 600; color: var(--sm-tinta); }
.sm-tabla tr:nth-child(odd) { background: var(--sm-superficie); }

.sm-aprox { color: var(--sm-ink-suave); font-style: italic; }
.sm-mapa-ficha { margin-top: 18px; border: 1px solid var(--sm-linea); border-radius: var(--sm-radio); overflow: hidden; }
.sm-mapa-ficha #map { width: 100%; height: 380px; }

/* ── tarjetas de propiedades similares ────────────────────────────────── */
.sm-similares-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
.sm-tarjeta {
  display: block; border: 1px solid var(--sm-linea); border-radius: var(--sm-radio);
  overflow: hidden; background: #fff; text-decoration: none !important;
  transition: border-color .16s ease, transform .16s ease;
}
.sm-tarjeta:hover { border-color: var(--sm-linea-fuerte); transform: translateY(-2px); }
.sm-tarjeta-foto { position: relative; display: block; }
/* La foto genérica es 1200x896 y la tarjeta 366x170: con el recorte
   centrado quedaba el horizonte, o sea una franja de cielo en todas las
   tarjetas. Se baja el punto de recorte a la zona construida. */
.sm-tarjeta-foto img { display: block; width: 100%; height: 170px; object-fit: cover; object-position: 50% 72%; transition: scale .3s ease; }
.sm-tarjeta:hover .sm-tarjeta-foto img { scale: 1.04; }
.sm-tarjeta-op {
  position: absolute; left: 10px; top: 10px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  background: var(--sm-tinta); color: #fff; padding: 4px 9px; border-radius: 4px;
}
.sm-tarjeta-cuerpo { display: block; padding: 14px 16px 16px; }
.sm-tarjeta-codigo { display: block; font-size: 11px; letter-spacing: .04em; color: var(--sm-ink-suave); }
.sm-tarjeta-codigo b {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-weight: 600; letter-spacing: .06em; color: var(--sm-bronce-texto);
  background: color-mix(in srgb, var(--sm-bronce) 8%, #fff); border: 1px solid color-mix(in srgb, var(--sm-bronce) 24%, #fff); border-radius: 4px; padding: 1px 6px;
}
.sm-panel-uf { font-size: 11px; color: var(--sm-ink-suave); margin: 6px 0 0; }
.sm-tarjeta-titulo { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--sm-tinta); margin: 5px 0 8px; }
.sm-tarjeta-precio { display: block; font-size: 15px; font-weight: 600; color: var(--sm-bronce-texto); }
.sm-tarjeta-sup { display: block; font-size: 12.5px; color: var(--sm-ink-suave); margin-top: 2px; }

/* ── listado de propiedades ───────────────────────────────────────────── */
/* El listado lo arma el buscador en el navegador; la tarjeta es la misma
   pieza que en la portada y en «propiedades similares». */
.sm-celda { margin-bottom: 18px; }
.sm-tarjeta-sector { display: block; font-size: 12px; color: var(--sm-ink-suave); margin: -4px 0 8px; }
.sm-tarjeta-alterno { display: block; font-size: 12px; color: var(--sm-ink-suave); margin-top: 2px; }
.sm-tarjeta-pie { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--sm-linea); }
.sm-tarjeta-pie > span { font-size: 11.5px; color: var(--sm-ink-suave); }
.sm-tarjeta-unidades { color: var(--sm-bronce-texto) !important; font-weight: 600; }

/* El mapa del listado nunca llegó a dibujarse: lo alimentaba un endpoint del
   backend original que no se clonó, así que quedaba una columna en blanco de
   la altura de toda la página. Se retira y el listado ocupa el ancho. */
#listadoMapa, #map_cont_div { display: none !important; }
#listadoProp { width: 100% !important; float: none !important; }

@media (max-width: 991px) {
  .sm-ficha-grid { grid-template-columns: 1fr; }
  .sm-panel { position: static; }
  .sm-similares-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .sm-ficha-foto img { height: 240px; }
  /* con terreno, construidos y disponibilidad son tres: de a dos, sin desbordar */
  .sm-ficha-rapidos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; width: 100%; }
  .sm-detalles { grid-template-columns: 1fr; }
  .sm-recorrido-pie { padding: 14px 16px; }
  /* tarjetas de a dos, no apiladas */
  .sm-similares-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sm-tarjeta-foto img { height: 120px; }
  .sm-tarjeta-cuerpo { padding: 10px 12px 12px; }
  .sm-tarjeta-titulo { font-size: 13px; }
  .sm-tabla th, .sm-tabla td { padding: 9px 10px; font-size: 12.5px; }
}


/* @sm-cabecera-y-pie */
/* ═══════════════════════════════════════════════════════════════════════
   Sistema de diseño, cabecera, menú y pie
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Los tres botones flotantes (WhatsApp, volver arriba y el probador de
     paletas) se apilan desde el borde de abajo. Viven en tres archivos
     distintos y cada vez que uno se movía, otro quedaba encima: en el
     buscador el de subir tapaba el de WhatsApp. Ahora todos miden desde esta
     base, y una página que necesite subirlos —el buscador, por su alternador
     lista/mapa— cambia sólo esta variable. */
  --sm-flot-abajo: 18px;
  --sm-flot-alto: 52px;   /* el del WhatsApp, que es el de más abajo */
  --sm-flot-aire: 12px;

  --sm-tinta: #26303a;
  --sm-negro: #1a222a;
  --sm-ink: #1d2732;
  --sm-ink-suave: #5d6874;
  --sm-bronce: #3c7aa1;
  /* El bronce de la marca sobre blanco da 3.0:1 y no sirve para texto chico.
     Este tono es el mismo color, más profundo, y sí cumple. */
  --sm-bronce-texto: #2f6285;
  --sm-bronce-osc: #356a8c;
  --sm-linea: #e5e7ea;
  --sm-linea-fuerte: #d3d8de;
  --sm-superficie: #f5f7f8;
  --sm-radio: 8px;
  /* Una sola sombra, y sólo para lo que flota. */
  --sm-sombra: 0 1px 2px rgba(15, 20, 25, .05), 0 10px 28px rgba(15, 20, 25, .09);
}

/* el panel lateral no debe correr la página al aparecer o desaparecer */
html { scrollbar-gutter: stable; }
body { color: var(--sm-ink); }

/* ── tipografía ───────────────────────────────────────────────────────── */
/* El tema ponía versalitas e interletrado ancho en casi todos los títulos:
   así ningún titular destaca. Peso 600 e interletrado negativo. */
h1, h2, h3, h4, .sm-titulo, .titulo-seccion {
  font-family: Poppins, 'Open Sans', Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-transform: none;
}

/* Etiqueta chica en mayúsculas: esto sí lleva interletrado ancho. */
.sm-etiqueta, .sm-ante {
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; margin: 0 0 14px;
}
.sm-ante { color: var(--sm-bronce); margin-bottom: 8px; }

/* ── botones ──────────────────────────────────────────────────────────── */
.sm-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: var(--sm-radio);
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  border: 1px solid transparent; text-decoration: none !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.sm-boton svg { width: 18px; height: 18px; flex: 0 0 auto; }
.sm-boton--bronce { background: var(--sm-bronce); color: #fff !important; }
.sm-boton--bronce:hover { background: var(--sm-bronce-osc); color: #fff !important; }
.sm-boton--tinta { background: var(--sm-tinta); color: #fff !important; }
.sm-boton--tinta:hover { background: #1b3144; color: #fff !important; }
.sm-boton--linea { background: transparent; border-color: var(--sm-linea-fuerte); color: var(--sm-ink) !important; }
.sm-boton--linea:hover { border-color: var(--sm-tinta); background: var(--sm-superficie); }
.sm-boton--claro { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: #fff !important; }
.sm-boton--claro:hover { background: rgba(255,255,255,.16); color: #fff !important; }

/* El tema traía botones con esquinas grandes y sombras: se planchan. */
.btn { border-radius: var(--sm-radio) !important; box-shadow: none !important; letter-spacing: -0.01em; }
.btn-primary { background-color: var(--sm-bronce) !important; border-color: var(--sm-bronce) !important; }
.btn-primary:hover { background-color: var(--sm-bronce-osc) !important; border-color: var(--sm-bronce-osc) !important; }

/* ── logotipo ─────────────────────────────────────────────────────────── */
.sm-marca {
  display: inline-flex; align-items: center; gap: 10px;
  color: #152f47; text-decoration: none; line-height: 1;
}
.sm-marca .sm-iso { width: 46px; height: 46px; flex: 0 0 auto; }
.sm-marca-txt { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sm-marca-txt strong {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  color: inherit; text-transform: none; white-space: nowrap;
}
/* SPA con una raya a cada lado, como en el logo */
.sm-marca-txt em {
  display: flex; align-items: center; gap: 7px; width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal; font-size: 15px; font-weight: 700;
  letter-spacing: .02em; color: inherit;
}
.sm-marca-txt em::before, .sm-marca-txt em::after { content: ""; flex: 1 1 auto; height: 2px; background: currentColor; }
/* en el pie (oscuro) el logo va sobre una placa blanca */
.sm-marca--placa { background: #fff; padding: 10px 16px; border-radius: var(--sm-radio); }
.header-logo a, .header-logo a:hover, .sm-pie-logo { text-decoration: none; }

/* ── franja superior de contacto ──────────────────────────────────────── */
#header .header-body { border-bottom: none; box-shadow: none; }
#header .header-container.container { padding-top: 13px; padding-bottom: 13px; }
#header .header-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
#header .header-column { float: none; padding: 0; }

.sm-contacto { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; }
.sm-contacto li { margin: 0; }
.sm-contacto a {
  display: flex; align-items: center; gap: 9px;
  color: var(--sm-ink) !important; text-decoration: none !important;
}
.sm-contacto svg { width: 16px; height: 16px; color: var(--sm-bronce-texto); flex: 0 0 auto; }
.sm-contacto a:hover svg { color: var(--sm-tinta); }
.sm-contacto a > span { display: flex; flex-direction: column; line-height: 1.3; }
.sm-contacto b { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.sm-contacto i { font-style: normal; font-size: 10px; letter-spacing: .1em; color: var(--sm-ink-suave); text-transform: uppercase; }
.sm-contacto-wsp:hover svg { color: #1fa855; }

/* ── barra de menú: fija al hacer scroll ──────────────────────────────── */
/* El tema envuelve la cabecera en un div .body que SÓLO la contiene: ese div
   sería el bloque contenedor del sticky y lo dejaría pegado ahí. */
/* El header y su cuerpo pasan a display:contents en base-propia, así la barra
   de menú puede pegarse arriba por sí sola. Acá sólo su aspecto. */
.body:has(> #header) { display: contents; }
#header .header-nav-bar { margin-top: 0 !important; box-shadow: none; }

#header .header-nav-main .nav-pills { display: flex; flex-wrap: wrap; }
#header .header-nav-main .nav-pills > li > a {
  color: #dfe3e7; font-size: 12.5px; font-weight: 600;
  letter-spacing: .02em; text-transform: none;
  padding: 16px 15px; border-radius: 0; background: none;
  position: relative; transition: color .16s ease;
}
#header .header-nav-main .nav-pills > li > a::before {
  content: ''; position: absolute; left: 15px; right: 15px; bottom: 10px;
  height: 2px; background: var(--sm-bronce);
  transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
#header .header-nav-main .nav-pills > li:hover > a,
#header .header-nav-main .nav-pills > li.active > a,
#header .header-nav-main .nav-pills > li > a:focus {
  color: #fff !important; background: none !important;
}
#header .header-nav-main .nav-pills > li:hover > a::before,
#header .header-nav-main .nav-pills > li.active > a::before { transform: scaleX(1); }
#header .header-nav-main .nav-pills > li.dropdown > a::after {
  content: ''; display: inline-block; width: 5px; height: 5px;
  margin: 0 0 3px 8px; vertical-align: middle;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); opacity: .6; transition: transform .2s ease, opacity .2s ease;
}
#header .header-nav-main .nav-pills > li.dropdown:hover > a::after {
  transform: rotate(225deg) translate(-3px,-3px); opacity: 1;
}

/* desplegables */
#header .header-nav-main .dropdown-menu {
  display: block; opacity: 0; visibility: hidden;
  transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s;
  min-width: 268px; margin: 0; padding: 6px 0;
  background: #fff; border: 1px solid var(--sm-linea); border-top: 2px solid var(--sm-bronce);
  border-radius: 0 0 var(--sm-radio) var(--sm-radio); box-shadow: var(--sm-sombra);
}
#header .header-nav-main li.dropdown:hover > .dropdown-menu,
#header .header-nav-main li.dropdown.open > .dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
#header .header-nav-main .dropdown-menu > li > a {
  padding: 10px 18px; font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--sm-ink) !important; border: none !important;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: background .14s ease, padding-left .14s ease;
}
#header .header-nav-main .dropdown-menu > li > a::after {
  content: '→'; opacity: 0; color: var(--sm-bronce-texto); transition: opacity .14s ease;
}
#header .header-nav-main .dropdown-menu > li > a:hover {
  background: var(--sm-superficie) !important; color: var(--sm-tinta) !important; padding-left: 23px;
}
#header .header-nav-main .dropdown-menu > li > a:hover::after { opacity: 1; }
#header .header-nav-main .dropdown-menu .dropdown-submenu > .dropdown-menu { display: none !important; }

/* botón de menú en teléfono */
#header .header-btn-collapse-nav {
  background: transparent; border: 1px solid rgba(255,255,255,.3);
  color: #fff; border-radius: var(--sm-radio); font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; padding: 8px 14px; margin: 9px 0; box-shadow: none;
}
#header .header-btn-collapse-nav:hover { background: var(--sm-bronce); border-color: var(--sm-bronce); }

/* «Cotizar», siempre a la vista en la barra fija */
#header .sm-nav-cotizar {
  float: right; margin: 9px 0 9px 10px; padding: 8px 18px;
  background: var(--sm-bronce); color: #fff !important; border-radius: var(--sm-radio);
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none !important; line-height: 1.3; transition: background .15s ease;
}
#header .sm-nav-cotizar:hover { background: var(--sm-bronce-osc); }
/* en computador, al extremo derecho de la barra, a la altura del menú */
@media (min-width: 992px) {
  #header .header-nav-bar > .container { position: relative; }
  #header .sm-nav-cotizar { float: none; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); margin: 0; }
}
@media (max-width: 991px) {
  #header .sm-nav-cotizar { padding: 8px 12px; }
  /* los iconos traían width: 60% en línea: con eso «Cotizar» bajaba a otra fila */
  #header .header-nav-bar .feature-box { width: auto !important; margin-right: 0 !important; order: 0; flex: 0 1 auto; }
  /* la barra es flex (base-propia): iconos, «Cotizar» y «Menú», en una fila */
  #header .sm-nav-cotizar { float: none; order: 1; margin: 9px 8px 9px auto; flex: 0 0 auto; }
  #header .header-nav-bar .header-btn-collapse-nav { order: 2; flex: 0 0 auto; }
}
@media (max-width: 420px) {
  /* en el teléfono chico, «Cotizar» reemplaza al icono de correo */
  #header .header-nav-bar .feature-box-icon:has(a[href^="mailto:"]) { display: none; }
}

/* El menú compacto arranca en el mismo punto que define base-propia. */
@media (max-width: 991px) {
  #header .header-nav-main { background: var(--sm-tinta); }
  #header .header-nav-main .nav-pills { display: block; }
  #header .header-nav-main .nav-pills > li { float: none; }
  #header .header-nav-main .nav-pills > li > a { padding: 13px 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
  #header .header-nav-main .nav-pills > li > a::before { display: none; }
  #header .header-nav-main .dropdown-menu {
    opacity: 1; visibility: visible; transform: none; position: static; float: none;
    box-shadow: none; border: none; background: rgba(0,0,0,.2); padding: 0; border-radius: 0;
  }
  #header .header-nav-main .dropdown-menu > li > a { color: #cfd4d9 !important; padding: 10px 18px; font-size: 13px; }
  #header .header-nav-main .dropdown-menu > li > a:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; }
  .sm-marca .sm-iso { width: 38px; height: 38px; }
  .sm-marca-txt strong { font-size: 14px; }
  .sm-marca-txt em { font-size: 12px; gap: 5px; }
}

/* ── buscador: pegado justo debajo del menú ───────────────────────────── */
@media (min-width: 992px) {
  .slider-contact-form, #buscadorCollapse, #buscadorCollapse.fixed {
    position: sticky !important; top: 52px !important;
    z-index: 1029; width: 100%;
    border-bottom: 1px solid var(--sm-linea);
  }
  #buscadorCollapse .featured-box { margin-top: 0 !important; margin-bottom: 0 !important; }
  #buscadorCollapse .box-search-home { background: #fff !important; }
  #buscadorCollapse .row + .row { margin-top: 0 !important; }
}
#buscadorCollapse .featured-box { border: none !important; box-shadow: none !important; }
#buscadorCollapse .btn-Operacion { border-radius: 0 !important; font-weight: 600; letter-spacing: -0.01em; box-shadow: none; }
#buscadorCollapse #botBuscar { letter-spacing: -0.01em; text-transform: none; font-weight: 600; }
.form-control { border-radius: var(--sm-radio) !important; border-color: var(--sm-linea-fuerte) !important; box-shadow: none !important; }
.form-control:focus { border-color: var(--sm-tinta) !important; }

/* ── panel de portada ─────────────────────────────────────────────────── */
.main > .container .row img[src*="equipo"] {
  display: block; width: 100%; height: 300px; object-fit: cover; object-position: center 60%;
}
@media (min-width: 1200px) { .main > .container .row img[src*="equipo"] { height: 380px; } }
@media (max-width: 767px) { .main > .container .row img[src*="equipo"] { height: 190px; } }
.sm-lema-portada { font-size: 22px !important; line-height: 1.5 !important; padding: 26px 32px !important; letter-spacing: -0.015em; }
@media (min-width: 1200px) { .sm-lema-portada { font-size: 26px !important; padding: 34px 44px !important; } }

/* ── botón flotante de WhatsApp: redondo y chico ──────────────────────── */
.sm-wsp {
  position: fixed; right: 18px; bottom: var(--sm-flot-abajo); z-index: 900;
  width: var(--sm-flot-alto); height: var(--sm-flot-alto); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #25d366; color: #fff !important;
  box-shadow: var(--sm-sombra);
  text-decoration: none !important; padding: 0;
  transition: background-color .16s ease, transform .16s ease;
}
.sm-wsp svg { width: 26px; height: 26px; }
.sm-wsp span { display: none; }
.sm-wsp:hover { background: #1fb457; color: #fff !important; transform: translateY(-2px); }
@media (max-width: 767px) {
  :root { --sm-flot-abajo: 14px; --sm-flot-alto: 48px; }
  .sm-wsp { right: 14px; }
}

/* ── pie ──────────────────────────────────────────────────────────────── */
.sm-pie {
  background: var(--sm-negro) !important;
  padding: 0 !important; margin: 0;
  font-family: Poppins, 'Open Sans', Arial, sans-serif;
}
.sm-pie-cta { border-bottom: 1px solid rgba(255,255,255,.08); background: #121820; }
/* mismo caso que en las cifras: el clearfix de .container ensucia flex/grid */
.sm-pie-cta .container::before, .sm-pie-cta .container::after,
.sm-pie-base .container::before, .sm-pie-base .container::after { content: none; }
.sm-pie-cta .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap; padding-top: 30px; padding-bottom: 30px;
}
.sm-pie-cta h2 { color: #fff; font-size: 22px; margin: 0; }
.sm-pie-cta-botones { display: flex; flex-wrap: wrap; gap: 10px; }
.sm-pie > .container { padding-top: 48px; padding-bottom: 12px; }

.sm-pie-grid { display: grid; gap: 34px; grid-template-columns: 2.1fr 1.2fr 1.2fr 1.5fr; }
.sm-pie-col .sm-etiqueta { color: #fff; }
.sm-pie-col ul { list-style: none; margin: 0; padding: 0; }
.sm-pie-col li { margin: 0 0 10px; }
.sm-pie-col a { color: #a8b2bc !important; font-size: 13.5px; text-decoration: none !important; transition: color .14s ease; }
.sm-pie-col a:hover { color: var(--sm-bronce) !important; }
.sm-pie-col--marca p { color: #8d98a3; font-size: 13.5px; line-height: 1.75; margin: 18px 0 0; max-width: 42ch; }
.sm-pie-logo { display: inline-block; }
.sm-pie-contacto li { display: flex; align-items: flex-start; gap: 10px; }
.sm-pie-contacto svg { width: 15px; height: 15px; margin-top: 3px; color: var(--sm-bronce); flex: 0 0 auto; }
.sm-pie-cobertura { color: #8d98a3; font-size: 12px; margin: 14px 0 0; }

.sm-pie-base { margin-top: 34px; border-top: 1px solid rgba(255,255,255,.08); }
.sm-pie-base .container {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; padding-top: 18px; padding-bottom: 22px;
}
.sm-pie-base p { margin: 0; color: #78838e; font-size: 12.5px; }
.sm-credito a { color: #a8b2bc !important; text-decoration: none !important; font-weight: 600; }
.sm-credito a:hover { color: var(--sm-bronce) !important; }

@media (max-width: 991px) {
  .sm-pie-grid { grid-template-columns: 1fr 1fr; }
  .sm-pie-col--marca { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
  .sm-pie-cta .container { flex-direction: column; align-items: flex-start; }
  .sm-pie-cta h2 { font-size: 19px; }
  .sm-pie > .container { padding-top: 32px; }
  .sm-pie-grid { grid-template-columns: 1fr; gap: 26px; }
  .sm-pie-base .container { justify-content: center; text-align: center; }
}

/* ── icono de WhatsApp y glifos del menú ──────────────────────────────── */
.sm-ico-wsp { display: inline-flex; align-items: center; justify-content: center; color: #25d366; }
.sm-ico-wsp svg { width: 20px; height: 20px; }
#header .feature-box-icon .sm-ico-wsp svg { width: 22px; height: 22px; }
.sm-pie-contacto .sm-ico-wsp svg, .sm-contacto .sm-ico-wsp svg { width: 16px; height: 16px; }

/* Los iconos que el tema pedía a Font Awesome ahora son SVG en línea. */
.sm-ico { display: inline-flex; align-items: center; justify-content: center; }
.sm-ico svg { width: 1em; height: 1em; }
#header .feature-box-icon .sm-ico svg { width: 20px; height: 20px; }
.sm-pie-contacto .sm-ico svg, .sm-panel .sm-ico svg { width: 15px; height: 15px; }
.header-btn-collapse-nav .sm-ico svg { width: 15px; height: 15px; margin-left: 6px; }
.sm-ico-tipo { display: inline-flex; flex: 0 0 auto; margin-right: 10px; color: var(--sm-bronce-texto); }
.sm-ico-tipo svg { width: 17px; height: 17px; }
#header .header-nav-main .dropdown-menu > li > a { justify-content: flex-start; }
#header .header-nav-main .dropdown-menu > li > a::after { margin-left: auto; }
/* sin flecha de submenú: esos ítems no tienen nada dentro */
#header .header-nav-main .dropdown-submenu > a::after,
#header .header-nav-main .dropdown-menu .thumb-preview,
#header .header-nav-main .dropdown-menu-thumb-preview { display: none !important; }

/* ── foco visible con el teclado ──────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--sm-bronce); outline-offset: 2px; border-radius: 2px; }
#header :focus-visible, .sm-pie :focus-visible { outline-color: #fff; }


/* @sm-contenido-cliente */
/* ═══ páginas institucionales ═══════════════════════════════════════════ */
.sm-cabecera-pagina { background: var(--sm-superficie) !important; border-bottom: 1px solid var(--sm-linea); padding: 38px 0 !important; }
.sm-cabecera-pagina h1 { font-size: 34px; font-weight: 600; color: var(--sm-tinta); margin: 0 0 8px; }
.sm-cabecera-pagina h1 span { display: block; font-size: 14px; font-weight: 500; letter-spacing: .6px; color: #8a8a8a; margin-top: 6px; }
.sm-cabecera-pagina .breadcrumb { background: none; padding: 0; margin: 0; font-size: 12.5px; }

.sm-seccion { padding: 56px 0 !important; margin: 0 !important; }
.sm-seccion--gris { background: var(--sm-superficie) !important; }
.sm-titulo { font-size: 28px; font-weight: 300; color: var(--sm-tinta); margin: 0 0 8px; text-align: center; }
.sm-titulo strong { font-weight: 700; }
.sm-titulo--claro, .sm-compromiso p { color: #fff; }
.sm-subtitulo { text-align: center; color: #7d7d7d; font-size: 15px; margin: 0 0 38px; }
.sm-entradilla { font-size: 17px; line-height: 1.75; color: var(--sm-tinta); font-weight: 500; }
.sm-intro p { line-height: 1.8; color: #5c5c5c; margin-bottom: 16px; }
.sm-figura { margin: 0; }
.sm-figura img { width: 100%; border-radius: 3px; box-shadow: 0 18px 40px rgba(0,0,0,.14); }
/* el logo del cliente en grande, sobre una placa blanca con borde fino */
.sm-figura--logo { display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #e3e8ed; border-radius: 6px; padding: 36px 28px; }
.sm-figura--logo .sm-logo-grande { width: 100%; max-width: 340px; height: auto; display: block; }

.sm-perfiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.sm-perfiles article { background: #fff; border-top: 3px solid var(--sm-bronce); padding: 24px 22px; box-shadow: 0 6px 18px rgba(0,0,0,.05); }
/* el tema pone versalitas en los h3 y los títulos quedaban gritando */
.sm-perfiles h3, .sm-servicio h3, .sm-pasos h3 { text-transform: none; letter-spacing: 0; }
.sm-perfiles h3 { font-size: 16px; font-weight: 600; color: var(--sm-tinta); margin: 0 0 10px; }
.sm-perfiles p { font-size: 13.5px; line-height: 1.7; color: #6d6d6d; margin: 0; }

.sm-compromiso { background: var(--sm-tinta) !important; }
.sm-compromiso p { line-height: 1.8; color: #c3ccd5; }
.sm-firma { margin-top: 28px !important; color: #fff !important; font-weight: 600; }
.sm-firma em { display: block; font-style: normal; font-weight: 400; color: var(--sm-bronce); margin-top: 4px; }
/* sin versalitas: el criterio del sistema es que las mayúsculas quedan
   para las etiquetas chicas, no para los botones. */
.sm-cta { margin-top: 22px; letter-spacing: -0.01em; text-transform: none; font-weight: 600; }

.sm-servicios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sm-servicio { background: #fff; border: 1px solid #eceae6; padding: 30px 26px; transition: box-shadow .2s ease, transform .2s ease; }
.sm-servicio:hover { box-shadow: 0 16px 34px rgba(0,0,0,.09); transform: translateY(-3px); }
.sm-ico-serv { width: 32px; height: 32px; color: var(--sm-bronce); }
.sm-servicio h3 { font-size: 17px; font-weight: 600; color: var(--sm-tinta); margin: 16px 0 10px; }
.sm-servicio p { font-size: 14px; line-height: 1.75; color: #6d6d6d; margin: 0 0 14px; }
.sm-servicio a { font-size: 13px; font-weight: 600; letter-spacing: .4px; color: var(--sm-bronce) !important; }
.sm-servicio-enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: auto 0 0; }
.sm-servicio-enlaces .sm-servicio-wsp { color: var(--sm-tinta) !important; opacity: .75; }
.sm-servicio-enlaces .sm-servicio-wsp:hover { opacity: 1; }

.sm-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: p; }
.sm-pasos li { position: relative; padding-top: 6px; }
.sm-pasos span { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sm-tinta); color: #fff; font-weight: 700; font-size: 14px; }
.sm-pasos h3 { font-size: 15px; font-weight: 600; color: var(--sm-tinta); margin: 14px 0 8px; }
.sm-pasos p { font-size: 13.5px; line-height: 1.7; color: #6d6d6d; margin: 0; }
.sm-cobertura { text-align: center; margin: 34px 0 0; font-size: 13.5px; letter-spacing: .5px; color: var(--sm-bronce); font-weight: 600; }

/* ── contacto ─────────────────────────────────────────────────────────── */
.sm-contacto-bloque { background: var(--sm-tinta); color: #fff; padding: 52px 0; }
.sm-contacto-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 44px; align-items: start; }
.sm-contacto-datos h2 { color: #fff; font-size: clamp(24px, 1.3rem + 1.3vw, 32px); margin: 0 0 12px; }
.sm-contacto-bajada { color: #b9c2cb; line-height: 1.75; margin: 0 0 26px; max-width: 46ch; }
.sm-contacto-datos .sm-datos { border-top: 1px solid rgba(255,255,255,.12); margin: 0; padding: 0; list-style: none; }
.sm-contacto-datos .sm-datos li {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12);
}
.sm-contacto-datos .sm-datos li > span {
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sm-bronce);
}
.sm-contacto-datos .sm-datos a { color: #fff !important; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.sm-contacto-datos .sm-datos a:hover { color: var(--sm-bronce) !important; }
.sm-contacto-cobertura { margin: 16px 0 0; font-size: 12.5px; color: #8d98a3; }

.sm-contacto-form { background: #fff; border-radius: var(--sm-radio); padding: 26px; color: var(--sm-ink); }
.sm-contacto-form h3 { font-size: 19px; margin: 0 0 6px; color: var(--sm-tinta); }
.sm-form-nota { font-size: 12.5px; color: var(--sm-ink-suave); margin: 0 0 18px; }
.sm-trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.sm-form-aviso { margin: 0; font-size: 14px; font-weight: 600; color: var(--sm-tinta); }
.sm-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sm-campo { display: flex; flex-direction: column; gap: 5px; margin: 0; min-width: 0; }
.sm-campo > span {
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sm-ink-suave);
}
.sm-campo > span i { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .75; }
.sm-campo input, .sm-campo select, .sm-campo textarea {
  width: 100%; padding: 11px 12px; font-size: 14px; color: var(--sm-ink);
  border: 1px solid var(--sm-linea-fuerte); border-radius: var(--sm-radio); background: #fff;
}
.sm-campo textarea { resize: vertical; min-height: 84px; }
.sm-campo input:focus, .sm-campo select:focus, .sm-campo textarea:focus {
  outline: none; border-color: var(--sm-tinta);
}
.sm-campo [aria-invalid="true"] { border-color: #a3261d; box-shadow: 0 0 0 3px rgba(163, 38, 29, .12); }
.sm-campo > span #cCuenta { float: right; font-variant-numeric: tabular-nums; }
/* En el teléfono, bajo 16 px el navegador acerca la página al tocar el campo. */
@media (max-width: 600px) { .sm-campo input, .sm-campo select, .sm-campo textarea { font-size: 16px; } }
.sm-campo--ancho { grid-column: 1 / -1; }
#cotizar { scroll-margin-top: 90px; }
.sm-obligatorio { color: #b3261e; font-weight: 700; letter-spacing: 0; }
.sm-form-leyenda { margin: -8px 0 12px; font-size: 12px; color: var(--sm-ink-suave); }
.sm-campo--comuna > label { display: block; }
.sm-campo--comuna > label > span {
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sm-ink-suave);
}
.sm-combo { position: relative; }
.sm-combo[hidden] { display: none; }
.sm-combo-lista {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: 4px 0; list-style: none; background: #fff;
  border: 1px solid var(--sm-linea-fuerte); border-radius: var(--sm-radio);
  box-shadow: var(--sm-sombra); max-height: 232px; overflow-y: auto;
}
.sm-combo-lista[hidden] { display: none; }
.sm-combo-lista li { display: flex; flex-direction: column; gap: 1px; padding: 7px 12px; cursor: pointer; line-height: 1.3; }
.sm-combo-lista li b { font-weight: 600; font-size: 14px; color: var(--sm-ink); }
.sm-combo-lista li small { font-size: 11.5px; color: var(--sm-ink-suave); }
.sm-combo-lista li[aria-selected="true"], .sm-combo-lista li:hover { background: var(--sm-superficie); }
.sm-combo-lista li.sm-combo-nada { cursor: default; color: var(--sm-ink-suave); font-size: 13px; }
@media (max-width: 600px) { .sm-combo-lista { max-height: 196px; } }
.sm-form-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sm-form-botones .sm-boton { width: 100%; justify-content: center; }
.sm-form-botones .sm-boton[hidden] { display: none; }
.sm-form-botones:has(.sm-boton[hidden]) { grid-template-columns: 1fr; }
.sm-boton--wsp { background: #1f8f4e; border-color: #1f8f4e; color: #fff; }
.sm-boton--wsp:hover { background: #197a42; border-color: #197a42; color: #fff; }
@media (max-width: 480px) { .sm-form-botones { grid-template-columns: 1fr; } }

.sm-contacto-mapa { height: 380px; }
.sm-contacto-mapa iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ── compromiso: compacto y centrado de verdad ────────────────────────── */
/* Antes usaba la cuadrícula del tema (col-md-8 + offset + text-center) y con
   los rellenos de sección quedaba una franja enorme con el texto corrido. */
.sm-compromiso { background: var(--sm-tinta) !important; padding: 44px 0; }
.sm-compromiso-caja { max-width: 62ch; margin: 0 auto; text-align: center; }
.sm-compromiso .sm-titulo { font-size: clamp(21px, 1.15rem + 1vw, 28px); margin: 0 0 14px; }
.sm-compromiso p { line-height: 1.7; color: #b9c2cb; margin: 0 0 12px; font-size: 14.5px; }
.sm-firma { margin: 20px 0 0 !important; color: #fff !important; font-weight: 600; font-size: 14px !important; }
.sm-firma em { display: block; font-style: normal; font-weight: 400; color: var(--sm-bronce); margin-top: 3px; }
.sm-compromiso .sm-cta { margin-top: 20px; }
.sm-compromiso .sm-aviso-botones { justify-content: center; margin-top: 20px; }

/* ── páginas de cada servicio (paginas-servicios.mjs) ─────────────────── */
.sm-servicio-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; align-items: start; }
.sm-servicio-cuerpo .sm-entradilla { margin: 0 0 22px; }
/* lo que el cliente escribe en el panel: subtítulos, listas, imágenes */
.sm-articulo { color: var(--sm-ink, #3b4654); font-size: 15.5px; line-height: 1.78; }
.sm-articulo > * { margin: 0 0 16px; }
.sm-articulo h2 { font-size: clamp(20px, 1.05rem + .8vw, 25px); font-weight: 600; letter-spacing: -0.02em; color: var(--sm-tinta); margin: 34px 0 12px; line-height: 1.25; }
.sm-articulo h3 { font-size: 17px; font-weight: 600; color: var(--sm-tinta); margin: 26px 0 8px; line-height: 1.35; }
.sm-articulo > :first-child { margin-top: 0; }
.sm-articulo ul { padding: 0; list-style: none; }
.sm-articulo li { position: relative; padding-left: 24px; margin: 0 0 8px; }
.sm-articulo li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 8px; height: 8px; border-radius: 2px; background: var(--sm-bronce); }
.sm-articulo figure { margin: 0 0 24px; }
.sm-articulo img { width: 100%; height: auto; max-height: 460px; object-fit: cover; border-radius: 6px; display: block; }
.sm-articulo a { color: var(--sm-bronce-texto, #8a6224); text-decoration: underline; }
.sm-servicio-lateral { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 18px; }
.sm-cotiza-caja { background: var(--sm-tinta); color: #fff; border-radius: 6px; padding: 24px 22px; }
.sm-cotiza-caja h2 { color: #fff; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; line-height: 1.3; }
.sm-cotiza-caja p { color: #b9c2cb; font-size: 14px; line-height: 1.65; margin: 0 0 16px; }
.sm-cotiza-caja .sm-boton { width: 100%; justify-content: center; margin-top: 8px; }
.sm-cotiza-caja .sm-boton--linea { color: #fff !important; border-color: rgba(255,255,255,.3); }
.sm-cotiza-caja .sm-boton--linea:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.sm-otros-servicios { border: 1px solid #e3e8ed; border-radius: 6px; padding: 18px 20px; }
.sm-otros-servicios .sm-etiqueta { display: block; margin: 0 0 10px; }
.sm-otros-servicios ul { list-style: none; margin: 0 0 12px; padding: 0; }
.sm-otros-servicios li { border-bottom: 1px solid #eef1f4; }
.sm-otros-servicios li a { display: block; padding: 9px 0; color: var(--sm-tinta) !important; font-size: 14px; text-decoration: none !important; }
.sm-otros-servicios li a:hover { color: var(--sm-bronce) !important; }
.sm-otros-todos { font-size: 13px; font-weight: 600; color: var(--sm-bronce) !important; }
/* ── página de bodegas (pagina-bodegas.mjs) ───────────────────────────── */
.sm-bodegas-entradilla { max-width: 70ch; margin: 0 0 28px; }
.sm-bodegas-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.sm-bodegas-caja { border: 1px solid #e3e8ed; border-radius: 6px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.sm-bodegas-caja--propietarios { background: var(--sm-superficie); }
.sm-bodegas-caja .sm-articulo { margin-bottom: 8px; }
.sm-bodegas-caja .sm-articulo img { max-height: 300px; }
.sm-bodegas-caja .sm-boton { justify-content: center; }
@media (max-width: 767px) {
  .sm-bodegas-grid { grid-template-columns: 1fr; gap: 16px; }
  .sm-bodegas-caja { padding: 18px; }
}


/* ── galería dentro de un texto editable (galeria-articulo.mjs) ──────── */
.sm-articulo .sm-galeria-art-marco { position: relative; margin: 0 0 24px; }
.sm-articulo .sm-galeria-art {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; border-radius: 6px; background: #1a222a;
}
.sm-articulo .sm-galeria-art::-webkit-scrollbar { display: none; }
.sm-articulo .sm-galeria-art figure { flex: 0 0 100%; scroll-snap-align: start; margin: 0; }
.sm-articulo .sm-galeria-art img { width: 100%; height: 380px; max-height: none; object-fit: contain; border-radius: 0; }
.sm-galeria-art-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--sm-tinta);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.sm-galeria-art-flecha svg { width: 20px; height: 20px; }
.sm-galeria-art-flecha--antes { left: 10px; }
.sm-galeria-art-flecha--despues { right: 10px; }
.sm-galeria-art-cuenta {
  position: absolute; right: 10px; bottom: 10px; margin: 0 !important;
  background: rgba(26, 34, 42, .78); color: #fff; font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
}
@media (max-width: 767px) { .sm-articulo .sm-galeria-art img { height: 260px; } }

.sm-faq-cont { max-width: 820px; }
.sm-faq h3 { margin: 0 0 6px; padding-top: 18px; border-top: 1px solid #e3e8ed; }
.sm-faq h3:first-child { padding-top: 0; border-top: none; }
.sm-faq p { margin: 0 0 18px; }
@media (max-width: 991px) {
  .sm-servicio-grid { grid-template-columns: 1fr; gap: 28px; }
  .sm-servicio-lateral { position: static; }
  /* los dos listados de enlaces, lado a lado: no apilar */
  .sm-servicio-lateral { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-cotiza-caja { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
  .sm-articulo { font-size: 15px; }
  .sm-otros-servicios { padding: 14px; }
  .sm-otros-servicios li a { font-size: 13px; }
}

/* Estas dos rejillas estaban fijas en 3 y 4 columnas a cualquier ancho. En
   tableta las tarjetas quedaban tan angostas que el título caía a una palabra
   por línea y la última columna se salía del contenedor. De a dos, nunca
   apiladas: en teléfono dos tarjetas por fila siguen siendo legibles y la
   página mide la mitad de largo. */
@media (max-width: 991px) {
  .sm-contacto-grid { grid-template-columns: 1fr; gap: 28px; }
  .sm-servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .sm-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Los cuatro perfiles se salían de la pantalla a 400 px: con 1fr a secas la
     columna nunca baja del ancho de su palabra más larga y la rejilla
     desborda en silencio. Dos por fila, y minmax(0, 1fr) para que sí baje. */
  .sm-perfiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 767px) {
  .sm-servicios { gap: 12px; }
  .sm-servicio { padding: 20px 18px; }
  .sm-perfiles { gap: 10px; }
  .sm-perfiles article { padding: 16px 14px; }
  .sm-perfiles h3 { font-size: 14.5px; margin: 0 0 7px; }
  .sm-perfiles p { font-size: 12.5px; line-height: 1.6; }
  .sm-servicio h3 { font-size: 15.5px; margin: 12px 0 8px; }
  .sm-servicio p { font-size: 13px; line-height: 1.6; }
  .sm-ico-serv { width: 26px; height: 26px; }
}
@media (max-width: 575px) {
  .sm-contacto-bloque { padding: 32px 0; }
  .sm-contacto-form { padding: 18px; }
  .sm-campos { grid-template-columns: 1fr; gap: 10px; }
  .sm-compromiso { padding: 32px 0; }
  .sm-contacto-mapa { height: 260px; }
}

/* @sm-sin-rastros */
/* el recuadro del ejecutivo pasó a ser el del equipo de Sotomayor */
.sm-agente-iso {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1 / 1; background: var(--sm-tinta); border-radius: 3px;
}
.sm-agente-iso svg { width: 58%; height: 58%; }
.agentNombre { font-weight: 600; color: var(--sm-tinta); }
.agentNombre small { font-weight: 400; color: #8a8a8a; }


/* @sm-portada */
/* ═══ portada ═══════════════════════════════════════════════════════════ */
.sm-portada { background: #fff; }

.sm-hero { position: relative; overflow: hidden; background: var(--sm-negro); }
.sm-hero-fotos { position: absolute; inset: 0; }
.sm-hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.sm-hero-foto.activa { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sm-hero-foto { transition: none; } }
.sm-hero-velo {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(15,20,25,.92) 0%, rgba(15,20,25,.78) 45%, rgba(15,20,25,.42) 100%);
}
.sm-hero-cuerpo { position: relative; padding-top: 74px; padding-bottom: 92px; max-width: 1170px; }
.sm-hero h1 {
  color: #fff; margin: 0 0 16px; max-width: 18ch;
  font-size: clamp(30px, 1.6rem + 2.6vw, 50px); line-height: 1.1;
  font-weight: 300; letter-spacing: -0.025em;
}
.sm-hero h1 strong { font-weight: 700; }
.sm-hero-bajada { color: #b8c2cc; font-size: 15.5px; line-height: 1.75; max-width: 56ch; margin: 0 0 26px; }
.sm-hero-botones { display: flex; gap: 12px; flex-wrap: wrap; }


/* ── buscador de la portada ───────────────────────────────────────────── */
.sm-busqueda { position: relative; z-index: 5; margin-top: -34px; }
.sm-busqueda-caja {
  background: #fff; border: 1px solid var(--sm-linea); border-radius: var(--sm-radio);
  box-shadow: var(--sm-sombra); overflow: hidden;
}
.sm-busqueda-ops { display: flex; border-bottom: 1px solid var(--sm-linea); }
.sm-busqueda-ops button {
  appearance: none; background: none; border: none; border-bottom: 2px solid transparent;
  padding: 13px 22px; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--sm-ink-suave); cursor: pointer; transition: color .16s ease, border-color .16s ease;
}
.sm-busqueda-ops button:hover { color: var(--sm-tinta); }
.sm-busqueda-ops button.activo { color: var(--sm-tinta); border-bottom-color: var(--sm-bronce); }
.sm-busqueda-campos { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; padding: 14px; }
.sm-busqueda-campos select {
  height: 46px; padding: 0 12px; width: 100%; font-size: 13.5px; color: var(--sm-ink);
  border: 1px solid var(--sm-linea-fuerte); border-radius: var(--sm-radio); background: #fff;
}
.sm-busqueda-campos select:focus { outline: none; border-color: var(--sm-tinta); }
.sm-busqueda-campos .sm-boton { height: 46px; min-width: 150px; }

@media (max-width: 767px) {
  .sm-busqueda { margin-top: -22px; }
  .sm-busqueda-ops button { flex: 1; padding: 12px 6px; font-size: 13px; }
  .sm-busqueda-campos { grid-template-columns: 1fr; gap: 8px; padding: 12px; }
  .sm-busqueda-campos .sm-boton { width: 100%; }
}

.sm-cifras { border-bottom: 1px solid var(--sm-linea); background: #fff; }
/* Bootstrap le pone :before/:after a .container para limpiar floats; si el
   propio .container es grid o flex, esos pseudo-elementos se vuelven celdas
   fantasma y desalinean la fila entera. */
.sm-cifras .container::before, .sm-cifras .container::after { content: none; }
.sm-cifras .container { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding-top: 30px; padding-bottom: 30px; }
.sm-cifras b { display: block; font-size: 30px; font-weight: 600; letter-spacing: -0.03em; color: var(--sm-tinta); }
.sm-cifras span { font-size: 12.5px; color: var(--sm-ink-suave); }

.sm-seccion-cabecera {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 26px;
}
.sm-seccion-cabecera .sm-titulo { text-align: left; margin: 0; font-size: clamp(22px, 1.2rem + 1.2vw, 30px); font-weight: 300; }
.sm-seccion-cabecera .sm-titulo strong { font-weight: 700; }

/* ── banda de llamados a cotizar ──────────────────────────────────────── */
.sm-banda { padding: 0 0 46px; background: #fff; }
.sm-banda-caja {
  position: relative; background: var(--sm-superficie); border: 1px solid var(--sm-linea);
  border-radius: var(--sm-radio); padding: 26px 28px 34px;
}
.sm-banda-msj { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
/* display:flex le gana al atributo hidden: sin esto salían los tres mensajes */
.sm-banda-msj[hidden] { display: none; }
.sm-banda-msj h2 { font-size: clamp(19px, 1rem + .9vw, 26px); font-weight: 600; letter-spacing: -0.02em; color: var(--sm-tinta); margin: 4px 0 6px; }
.sm-banda-texto { margin: 0; color: var(--sm-ink-suave); font-size: 14.5px; line-height: 1.6; max-width: 62ch; }
.sm-banda-puntos { position: absolute; left: 28px; bottom: 14px; display: flex; gap: 7px; }
.sm-banda-puntos button {
  appearance: none; width: 9px; height: 9px; padding: 0; border-radius: 50%;
  border: 1px solid var(--sm-linea-fuerte); background: transparent; cursor: pointer;
}
.sm-banda-puntos button[aria-selected="true"] { background: var(--sm-bronce); border-color: var(--sm-bronce); }
@media (max-width: 767px) {
  .sm-banda { padding-bottom: 32px; }
  .sm-banda-caja { padding: 18px 16px 30px; }
  .sm-banda-msj { gap: 14px; }
  .sm-banda-msj .sm-boton { width: 100%; justify-content: center; }
  .sm-banda-puntos { left: 16px; }
}

/* ── pestañas de destacadas ───────────────────────────────────────────── */
.sm-pestanas { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--sm-linea); margin-bottom: 22px; }
.sm-pestana {
  appearance: none; background: none; border: none; border-bottom: 2px solid transparent;
  padding: 10px 14px; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--sm-ink-suave); cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  transition: color .16s ease, border-color .16s ease;
}
.sm-pestana span {
  font-size: 10.5px; font-weight: 600; background: var(--sm-superficie);
  border: 1px solid var(--sm-linea); border-radius: 999px; padding: 1px 7px; color: var(--sm-ink-suave);
}
.sm-pestana:hover { color: var(--sm-tinta); }
.sm-pestana.activa { color: var(--sm-tinta); border-bottom-color: var(--sm-bronce); }
.sm-pestana.activa span { background: color-mix(in srgb, var(--sm-bronce) 8%, #fff); border-color: color-mix(in srgb, var(--sm-bronce) 24%, #fff); color: var(--sm-bronce-texto); }

.sm-grid-propiedades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

/* ── por qué ──────────────────────────────────────────────────────────── */
.sm-porque-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 44px; align-items: start; }
.sm-porque-grid .sm-titulo { text-align: left; margin: 0 0 16px; font-size: clamp(22px, 1.2rem + 1.2vw, 30px); font-weight: 300; }
.sm-porque-texto { line-height: 1.8; color: var(--sm-ink-suave); margin: 0 0 22px; }
.sm-portada .sm-pasos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; list-style: none; margin: 0; padding: 0; }
.sm-portada .sm-pasos li { border: 1px solid var(--sm-linea); border-radius: var(--sm-radio); padding: 18px; background: var(--sm-superficie); }
.sm-portada .sm-pasos span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--sm-tinta); color: #fff; font-size: 13px; font-weight: 700;
}
.sm-portada .sm-pasos h3 { font-size: 14.5px; margin: 12px 0 6px; color: var(--sm-tinta); }
.sm-portada .sm-pasos p { font-size: 13px; line-height: 1.65; color: var(--sm-ink-suave); margin: 0; }

@media (max-width: 991px) {
  .sm-grid-propiedades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-porque-grid { grid-template-columns: 1fr; gap: 28px; }
  .sm-cifras .container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .sm-hero-cuerpo { padding-top: 46px; padding-bottom: 54px; }
  .sm-hero-bajada { font-size: 14px; }
  /* «Ver propiedades» a todo el ancho; WhatsApp y cotización, lado a lado */
  .sm-hero-botones .sm-boton { flex: 1 1 calc(50% - 6px); min-width: 0; padding-left: 10px; padding-right: 10px; font-size: 13.5px; }
  .sm-hero-botones .sm-boton:first-child { flex-basis: 100%; }
  .sm-cifras b { font-size: 24px; }
  /* tarjetas de a dos, no apiladas */
  .sm-grid-propiedades { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sm-portada .sm-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sm-portada .sm-pasos li { padding: 13px; }
  .sm-seccion-cabecera { margin-bottom: 18px; }
  .sm-seccion-cabecera .sm-boton { width: 100%; }

  /* La portada medía 5.087 px en un teléfono de 390: seis pantallas. No es
     el hero (458 px), son las secciones que repiten seis tarjetas de a dos,
     o sea tres filas cada una. En el teléfono se muestran cuatro y el resto
     queda a un toque, en el botón que ya estaba en la cabecera de cada
     sección. En pantallas grandes siguen saliendo las seis: ahí caben en
     dos filas y no estorban. */
  .sm-destacadas .sm-grid-propiedades > :nth-child(n+5) { display: none; }
  /* el último de servicios es la tarjeta de «¿Conversamos?»: esa se queda */
  .sm-portada .sm-servicio:not(.sm-servicio--cta):nth-child(n+4) { display: none; }

  /* las tarjetas también se aprietan: a 177 px de ancho, los textos de
     escritorio dejan la tarjeta en 283 px de alto */
  .sm-grid-propiedades .sm-tarjeta-foto img { height: 108px; }
  .sm-grid-propiedades .sm-tarjeta-cuerpo { padding: 10px 11px 12px; }
  .sm-grid-propiedades .sm-tarjeta-titulo { font-size: 13px; margin: 4px 0 6px; }
  .sm-grid-propiedades .sm-tarjeta-precio { font-size: 13.5px; }
  .sm-grid-propiedades .sm-tarjeta-codigo { font-size: 10px; }
  .sm-portada .sm-servicio { padding: 16px 14px; }
  .sm-portada .sm-servicio h3 { font-size: 14.5px; margin: 0 0 7px; }
  .sm-portada .sm-servicio p { font-size: 12.5px; line-height: 1.6; }
}


/* @sm-buscador */
/* ═══ buscador de propiedades ═══════════════════════════════════════════ */
.sm-buscador { background: #fff; }
/* el llamado a cotizar del final (los estilos base vienen de la ficha) */
.sm-cotiza-buscador { margin: 26px 0 0; }
@media (max-width: 991px) { .sm-cotiza-buscador { margin-top: 18px; } }
.sm-buscador-ancho { max-width: 1440px; margin: 0 auto; padding: 0 22px; }

.sm-buscador-barra {
  position: sticky; top: 52px; z-index: 1020;
  background: #fff; border-bottom: 1px solid var(--sm-linea);
  padding: 14px 0;
}
.sm-filtros { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 0; }
.sm-filtro { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sm-filtro label { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sm-ink-suave); margin: 0; }
/* El tema pone width:100% a todo select dentro de un formulario: sin esto
   cada filtro ocupaba una fila entera y la barra quedaba de seis pisos. */
.sm-filtro { flex: 0 1 auto; }
.sm-filtro select, .sm-filtro input[type="search"] {
  height: 42px; padding: 0 12px; font-size: 13.5px; color: var(--sm-ink);
  border: 1px solid var(--sm-linea-fuerte); border-radius: var(--sm-radio);
  background: #fff; width: auto; min-width: 150px; max-width: 100%;
}
/* el tema también ignora el atributo hidden en algunos contenedores */
.sm-avanzados[hidden], .sm-mapa-boton[hidden], .sm-vacio[hidden] { display: none !important; }
.sm-filtro select:focus, .sm-filtro input:focus { outline: none; border-color: var(--sm-tinta); }
/* La lupa se posicionaba contra la caja entera del filtro, que incluye la
   etiqueta para lectores de pantalla: caía encima de la primera letra del
   texto de ayuda. Ahora se posiciona contra el propio campo. */
/* Y la regla de arriba (.sm-filtro input[type=search], con relleno parejo de
   12px) pesaba más que «.sm-filtro--texto input»: el relleno para la lupa
   nunca se aplicaba y el texto de ayuda empezaba debajo del icono. Ahora el
   selector pesa lo mismo y va después. El campo además era el más angosto
   de la barra siendo el más usado: pasa a ser el más ancho. */
.sm-filtro--texto { flex: 2 1 340px; }
.sm-campo-con-icono { position: relative; display: block; }
.sm-filtro--texto input[type="search"] { width: 100%; min-width: 0; padding: 0 14px 0 44px; font-size: 14.5px; }
.sm-filtro-ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  display: inline-flex; color: var(--sm-ink-suave); pointer-events: none;
}
.sm-filtro-ico svg { width: 17px; height: 17px; display: block; }

/* El botón para plegar los filtros sólo existe en pantallas chicas. */
.sm-plegar { display: none; }
.sm-filtro-mas, .sm-filtro-limpiar { height: 42px; }
.sm-filtro-mas {
  appearance: none; background: var(--sm-superficie); border: 1px solid var(--sm-linea-fuerte);
  border-radius: var(--sm-radio); padding: 0 16px; font-size: 13px; font-weight: 600;
  color: var(--sm-ink); cursor: pointer;
}
.sm-filtro-mas:hover { border-color: var(--sm-tinta); }
.sm-filtro-mas[aria-expanded="true"] { background: var(--sm-tinta); color: #fff; border-color: var(--sm-tinta); }

.sm-avanzados {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 26px; align-items: center;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sm-linea);
}
.sm-rango-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.sm-rango-cabecera label { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sm-ink-suave); margin: 0; }
.sm-rango-cabecera output { font-size: 13px; font-weight: 600; color: var(--sm-tinta); }
.sm-rango-controles { position: relative; height: 22px; }
.sm-rango-controles input[type="range"] {
  position: absolute; left: 0; right: 0; width: 100%; margin: 0; padding: 0;
  appearance: none; background: none; pointer-events: none; height: 22px;
}
.sm-rango-controles input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: var(--sm-linea-fuerte); border-radius: 3px; }
.sm-rango-controles input[type="range"]::-moz-range-track { height: 3px; background: var(--sm-linea-fuerte); border-radius: 3px; }
.sm-rango-controles input[type="range"]::-webkit-slider-thumb {
  appearance: none; pointer-events: auto; width: 16px; height: 16px; margin-top: -6.5px;
  border-radius: 50%; background: #fff; border: 2px solid var(--sm-tinta); cursor: grab;
}
.sm-rango-controles input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--sm-tinta); cursor: grab;
}
.sm-check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--sm-ink); margin: 0; font-weight: 500; }
.sm-check input { width: 16px; height: 16px; accent-color: var(--sm-bronce); }

/* ── cuerpo: lista + mapa ─────────────────────────────────────────────── */
.sm-buscador-cuerpo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 40%);
  gap: 0; max-width: 1440px; margin: 0 auto;
}
.sm-resultados { padding: 22px; min-width: 0; }
.sm-resultados-cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }

/* ── una o dos columnas ───────────────────────────────────────────────── */
/* Sólo aparece donde la rejilla automática no da para elegir: en escritorio
   ya entran tres o cuatro tarjetas y el botón sobraría. */
.sm-vista-cols { display: none; }
.sm-vista-cols button {
  appearance: none; cursor: pointer; padding: 0;
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--sm-linea-fuerte); color: var(--sm-ink-suave);
}
.sm-vista-cols button:first-child { border-radius: var(--sm-radio) 0 0 var(--sm-radio); }
.sm-vista-cols button:last-child { border-radius: 0 var(--sm-radio) var(--sm-radio) 0; margin-left: -1px; }
.sm-vista-cols button svg { width: 16px; height: 16px; }
.sm-vista-cols button.activo {
  background: var(--sm-tinta); border-color: var(--sm-tinta); color: #fff; position: relative;
}
.sm-resultados-titulo { font-size: 22px; margin: 0; color: var(--sm-tinta); }
.sm-resultados-sub { margin: 6px 0 0; font-size: 13.5px; color: var(--sm-ink-suave); }
.sm-resultados-sub strong { color: var(--sm-tinta); font-weight: 600; }
.sm-resultados-orden select {
  height: 38px; padding: 0 12px; font-size: 13px; border-radius: var(--sm-radio);
  border: 1px solid var(--sm-linea-fuerte); background: #fff; color: var(--sm-ink);
}

/* Etiquetas de los filtros activos. Se llaman «chip» y no «ficha» a
   proposito: .sm-ficha ya era la pagina de propiedad y la pildora se
   estaba aplicando al <div class="main sm-ficha"> entero. */
.sm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sm-chip {
  appearance: none; display: inline-flex; align-items: center; gap: 8px;
  background: var(--sm-superficie); border: 1px solid var(--sm-linea-fuerte);
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; color: var(--sm-ink); cursor: pointer;
}
.sm-chip span { color: var(--sm-ink-suave); font-size: 15px; line-height: 1; }
.sm-chip:hover { border-color: var(--sm-tinta); }

.sm-vacio { padding: 40px 0; text-align: center; color: var(--sm-ink-suave); font-size: 14px; }
.sm-enlace { appearance: none; background: none; border: none; padding: 0; color: var(--sm-bronce-texto); font-weight: 600; cursor: pointer; text-decoration: underline; }

.sm-tarjeta--activa { border-color: var(--sm-bronce) !important; }
/* la columna de resultados es angosta: la grilla se acomoda sola */
.sm-buscador .sm-grid-propiedades { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }

.sm-mapa-col { position: relative; }
.sm-mapa-caja { position: sticky; top: 118px; height: calc(100vh - 118px); border-left: 1px solid var(--sm-linea); }
#smMapa { width: 100%; height: 100%; background: var(--sm-superficie); }
.sm-mapa-boton {
  position: absolute; left: 50%; top: 16px; transform: translateX(-50%); z-index: 500;
  appearance: none; border: 1px solid var(--sm-linea-fuerte); background: #fff;
  border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 600;
  color: var(--sm-tinta); cursor: pointer; box-shadow: var(--sm-sombra);
}

/* marcador con el precio, en vez del pin genérico de Leaflet */
.sm-pin span {
  display: inline-block; white-space: nowrap;
  background: var(--sm-tinta); color: #fff;
  font-size: 11.5px; font-weight: 600; letter-spacing: -0.01em;
  padding: 5px 10px; border-radius: 999px;
  border: 1.5px solid #fff; box-shadow: 0 2px 6px rgba(15,20,25,.35);
  transform: translate(-50%, -50%);
}
.sm-pin--activo span { background: var(--sm-bronce); }
/* grupo de propiedades que se tapaban entre ellas: redondo, con la cuenta */
.sm-pin--grupo span {
  min-width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sm-bronce); font-size: 13px; cursor: pointer;
}
.sm-pin--grupo:hover span { background: var(--sm-bronce-osc); }
.leaflet-container { font-family: Poppins, 'Open Sans', Arial, sans-serif; }
.sm-pop-marco .leaflet-popup-content-wrapper { border-radius: var(--sm-radio); padding: 0; overflow: hidden; }
.sm-pop-marco .leaflet-popup-content { margin: 0; width: auto !important; }
.sm-pop { display: block; text-decoration: none !important; }
.sm-pop img { display: block; width: 100%; height: 96px; object-fit: cover; }
.sm-pop-codigo { display: block; padding: 10px 12px 0; font-size: 10.5px; letter-spacing: .1em; color: var(--sm-ink-suave); font-family: ui-monospace, Menlo, Consolas, monospace; }
.sm-pop-titulo { display: block; padding: 3px 12px 0; font-size: 13.5px; font-weight: 600; color: var(--sm-tinta); }
.sm-pop-precio { display: block; padding: 4px 12px 12px; font-size: 14px; font-weight: 600; color: var(--sm-bronce-texto); }

/* alternador lista / mapa, sólo en teléfono */
.sm-vista-movil { display: none; }

@media (max-width: 1099px) {
  .sm-buscador-cuerpo { grid-template-columns: 1fr; }
  .sm-mapa-caja { position: static; height: 420px; border-left: none; border-top: 1px solid var(--sm-linea); }
}

@media (max-width: 991px) {
  /* En el teléfono los filtros ocupaban media pantalla pegados bajo el menú y
     no se podían cerrar. Ahora se pliegan detrás de un botón: lo único que
     queda fijo es el botón. */
  .sm-plegar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; appearance: none; cursor: pointer;
    background: var(--sm-superficie); border: 1px solid var(--sm-linea-fuerte);
    border-radius: var(--sm-radio); padding: 11px 14px;
    font-size: 13.5px; font-weight: 600; color: var(--sm-tinta);
  }
  .sm-plegar-flecha {
    width: 8px; height: 8px; flex: 0 0 auto;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease;
  }
  .sm-buscador-barra.sm-desplegada .sm-plegar-flecha { transform: rotate(225deg) translate(-2px, -2px); }
  .sm-buscador-barra .sm-filtros { display: none; }
  .sm-buscador-barra .sm-avanzados { display: none; }
  .sm-buscador-barra.sm-desplegada .sm-filtros { display: flex; margin-top: 10px; }
  .sm-buscador-barra.sm-desplegada .sm-avanzados:not([hidden]) { display: grid; margin-top: 10px; }
}
@media (max-width: 767px) {
  .sm-buscador-barra { top: 52px; padding: 10px 0; }
  .sm-buscador-ancho { padding: 0 14px; }
  .sm-filtros { gap: 8px; }
  .sm-filtro { flex: 1 1 calc(50% - 4px); }
  .sm-filtro--texto { flex: 1 1 100%; }
  .sm-filtro select, .sm-filtro input[type="search"] { min-width: 0; width: 100%; height: 40px; font-size: 13px; }
  /* 16 px: con menos, el iPhone agranda la página al tocar el campo */
  .sm-filtro--texto input[type="search"] { height: 44px; font-size: 16px; }
  .sm-filtro-mas, .sm-filtro-limpiar { flex: 1 1 calc(50% - 4px); height: 40px; }
  .sm-avanzados { grid-template-columns: 1fr; gap: 16px; }
  .sm-resultados { padding: 16px 14px 90px; }
  .sm-resultados-titulo { font-size: 18px; }
  .sm-resultados-cabecera { margin-bottom: 10px; }
  .sm-resultados-orden { flex: 1 1 auto; min-width: 0; }
  .sm-resultados-orden select { width: 100%; }

  /* El selector de columnas va junto al de orden, en la misma fila. */
  .sm-vista-cols { display: inline-flex; flex: 0 0 auto; order: 2; }
  .sm-vista-cols button { width: 40px; height: 40px; }

  .sm-buscador[data-columnas="1"] .sm-grid-propiedades { grid-template-columns: 1fr; }
  .sm-buscador[data-columnas="2"] .sm-grid-propiedades {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  }
  /* A dos por fila la tarjeta mide ~175 px: la foto y los textos de escritorio
     no caben. Se aprieta todo, y el código —que es lo más largo— se deja en
     una línea con puntos suspensivos en vez de romper la tarjeta. */
  .sm-buscador[data-columnas="2"] .sm-tarjeta-foto img { height: 108px; }
  .sm-buscador[data-columnas="2"] .sm-tarjeta-cuerpo { padding: 10px 11px 12px; }
  .sm-buscador[data-columnas="2"] .sm-tarjeta-codigo {
    font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .sm-buscador[data-columnas="2"] .sm-tarjeta-codigo b { padding: 1px 4px; }
  .sm-buscador[data-columnas="2"] .sm-tarjeta-titulo { font-size: 13px; margin: 4px 0 6px; }
  .sm-buscador[data-columnas="2"] .sm-tarjeta-precio { font-size: 13.5px; }
  .sm-buscador[data-columnas="2"] .sm-tarjeta-sup { font-size: 11.5px; }
  .sm-buscador[data-columnas="2"] .sm-tarjeta-op { font-size: 9.5px; padding: 3px 6px; left: 7px; top: 7px; }
  .sm-buscador[data-columnas="2"] .sm-tarjeta-sector { font-size: 11px; margin: -2px 0 5px; }
  .sm-buscador[data-columnas="2"] .sm-tarjeta-alterno { font-size: 11px; }
  /* El pie (superficie y unidades) se partía en dos líneas y sumaba 62 px de
     alto por tarjeta. Apilado y apretado ocupa la mitad. */
  .sm-buscador[data-columnas="2"] .sm-tarjeta-pie {
    gap: 2px 8px; margin-top: 8px; padding-top: 7px;
  }
  .sm-buscador[data-columnas="2"] .sm-tarjeta-pie > span { font-size: 10.5px; }

  /* La tarjeta del marcador medía 259 px de alto: en una pantalla de mapa de
     611 px tapaba casi la mitad. */
  .sm-pop img { height: 74px; }
  .sm-pop-codigo { padding: 8px 10px 0; }
  .sm-pop-titulo { padding: 2px 10px 0; font-size: 13px; }
  .sm-pop-precio { padding: 3px 10px 10px; font-size: 13.5px; }

  /* En el teléfono no caben lista y mapa a la vez: se alternan. */
  .sm-vista-movil {
    display: flex; position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
    z-index: 899; background: var(--sm-tinta); border-radius: 999px; padding: 4px;
    box-shadow: var(--sm-sombra);
  }
  .sm-vista-movil button {
    appearance: none; border: none; background: none; color: #cfd4d9;
    font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  }
  .sm-vista-movil button svg { width: 15px; height: 15px; }
  .sm-vista-movil button.activo { background: #fff; color: var(--sm-tinta); }
  .sm-buscador[data-vista="mapa"] .sm-resultados { display: none; }
  /* En vista mapa, el mapa ocupa la pantalla bajo la barra: antes heredaba
     420 px y quedaba una franja muerta debajo. */
  .sm-buscador[data-vista="mapa"] .sm-mapa-col { display: block; }
  .sm-buscador[data-vista="mapa"] .sm-mapa-caja {
    position: fixed; left: 0; right: 0; bottom: 0; height: auto;
    top: var(--sm-mapa-arriba, 118px);
    border: none; z-index: 700;
  }
  .sm-buscador:not([data-vista="mapa"]) .sm-mapa-col { display: none; }
}


/* @sm-paletas */
/* ═══ probador de paletas ═══════════════════════════════════════════════ */
html[data-paleta="pizarra"] {
  --sm-tinta: #26303a; --sm-negro: #1a222a;
  --sm-bronce: #3c7aa1; --sm-bronce-texto: #2f6285; --sm-bronce-osc: #356a8c;
  --sm-linea: #e5e7ea; --sm-superficie: #f5f7f8;
}
html[data-paleta="sotomayor"] {
  --sm-tinta: #152f47; --sm-negro: #071c31;
  --sm-bronce: #2b6699; --sm-bronce-texto: #1d4f78; --sm-bronce-osc: #1d4f78;
  --sm-linea: #dfe7ef; --sm-superficie: #f2f6fa;
}
html[data-paleta="noche"] {
  --sm-tinta: #0b2239; --sm-negro: #061626;
  --sm-bronce: #3a74a3; --sm-bronce-texto: #285c88; --sm-bronce-osc: #2d6590;
  --sm-linea: #e1e8ef; --sm-superficie: #f3f6f9;
}
html[data-paleta="grafito"] {
  --sm-tinta: #1f2429; --sm-negro: #15191d;
  --sm-bronce: #2f6a9c; --sm-bronce-texto: #255a86; --sm-bronce-osc: #275a85;
  --sm-linea: #e4e6e8; --sm-superficie: #f5f6f7;
}
html[data-paleta="agua"] {
  --sm-tinta: #132c42; --sm-negro: #0b1f31;
  --sm-bronce: #1b7a83; --sm-bronce-texto: #15636b; --sm-bronce-osc: #16666e;
  --sm-linea: #e0e9ea; --sm-superficie: #f2f7f7;
}
html[data-paleta="cobre"] {
  --sm-tinta: #152f47; --sm-negro: #0d1f30;
  --sm-bronce: #a95e35; --sm-bronce-texto: #94502a; --sm-bronce-osc: #8f4f2c;
  --sm-linea: #e8e4de; --sm-superficie: #f7f5f1;
}

.sm-probador { position: fixed; left: 18px; bottom: var(--sm-flot-abajo); z-index: 901; }
.sm-probador-boton {
  appearance: none; width: 46px; height: 46px; border-radius: 50%;
  background: #fff; border: 1px solid var(--sm-linea-fuerte);
  color: var(--sm-tinta); cursor: pointer; box-shadow: var(--sm-sombra);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .16s ease;
}
.sm-probador-boton:hover { transform: translateY(-2px); }
.sm-probador-boton svg { width: 22px; height: 22px; }

.sm-probador-panel {
  position: absolute; left: 0; bottom: 58px; width: 290px;
  background: #fff; border: 1px solid var(--sm-linea); border-radius: var(--sm-radio);
  box-shadow: var(--sm-sombra); padding: 14px;
}
.sm-probador-panel[hidden] { display: none !important; }
.sm-probador-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sm-probador-titulo { margin: 0 0 4px; font-size: 13.5px; font-weight: 600; color: var(--sm-tinta); }
/* Cerrar tocando fuera funciona, pero no se descubre solo y en el teléfono el
   panel es una hoja que tapa media pantalla. Va la cruz de siempre. */
.sm-probador-cerrar {
  appearance: none; flex: 0 0 auto; margin: -4px -4px 0 0;
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 50%; color: var(--sm-ink-suave);
}
.sm-probador-cerrar:hover { background: var(--sm-superficie); color: var(--sm-tinta); }
.sm-probador-cerrar svg { width: 17px; height: 17px; }
.sm-probador-nota { margin: 0 0 12px; font-size: 11.5px; line-height: 1.5; color: var(--sm-ink-suave); }
.sm-paletas { display: grid; gap: 4px; max-height: 44vh; overflow-y: auto; }
.sm-paleta {
  appearance: none; display: flex; align-items: center; gap: 11px; width: 100%;
  background: none; border: 1px solid transparent; border-radius: 6px;
  padding: 8px 9px; cursor: pointer; text-align: left;
}
.sm-paleta:hover { background: var(--sm-superficie); }
.sm-paleta.activa { border-color: var(--sm-linea-fuerte); background: var(--sm-superficie); }
.sm-paleta-colores { display: inline-flex; flex: 0 0 auto; }
.sm-paleta-colores i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #fff; margin-left: -5px; }
.sm-paleta-colores i:first-child { margin-left: 0; }
.sm-paleta-txt { display: flex; flex-direction: column; min-width: 0; }
.sm-paleta-txt b { font-size: 12.5px; font-weight: 600; color: var(--sm-ink); letter-spacing: -0.01em; }
.sm-paleta-txt i { font-style: normal; font-size: 10.5px; color: var(--sm-ink-suave); }

@media (max-width: 767px) {
  .sm-probador { left: 14px; }
  .sm-probador-boton { width: 42px; height: 42px; }
  /* En el teléfono el panel salía del alto de la pantalla y quedaba cortado
     por abajo. Va como hoja inferior, con su propio desplazamiento. */
  .sm-probador-panel {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto;
    max-height: 72vh; overflow-y: auto;
    border-radius: 14px 14px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 30px rgba(15,20,25,.25);
  }
  .sm-paletas { max-height: none; }
  /* Blanco de toque de 44 px: en la hoja inferior la cruz es la salida. */
  .sm-probador-cerrar { width: 44px; height: 44px; margin: -8px -8px 0 0; }
  .sm-probador-cerrar svg { width: 20px; height: 20px; }
}
/* En el buscador, el alternador lista/mapa ocupa el centro abajo y el mapa
   se extiende hasta el borde: los flotantes suben para no quedar encima.
   Antes se subían el probador y el WhatsApp uno por uno y el de volver
   arriba se quedaba abajo, pisando al de WhatsApp. Se mueve la base y suben
   los tres. */
@media (max-width: 991px) {
  body:has(.sm-buscador) { --sm-flot-abajo: 76px; }
}


/* @sm-base */
/* ═══════════════════════════════════════════════════════════════════════
   Base propia — lo que antes venía del tema clonado
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
:where(body) { margin: 0; font-family: Poppins, 'Open Sans', Arial, sans-serif; font-size: 14px; line-height: 1.6; }
:where(img) { max-width: 100%; height: auto; }
:where(a) { color: var(--sm-tinta); text-decoration: none; }
:where(a:hover) { color: var(--sm-bronce-texto); }
:where(p) { margin: 0 0 12px; }

/* ── cuadrícula ───────────────────────────────────────────────────────── */
/* Todo lo genérico va dentro de :where(), que no suma especificidad.
   Sin esto, .container { padding: 0 22px } le ganaba a
   .sm-hero-cuerpo { padding-bottom: 92px } —las dos son una clase, y esta
   hoja se carga después—: el relleno del hero quedaba en cero, el hero se
   veía achicado y la caja del buscador se montaba sobre sus botones. */
:where(.container) { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 22px; }
:where(.row) { display: flex; flex-wrap: wrap; margin: 0 -11px; }
:where(.row > [class*="col-"]) { padding: 0 11px; width: 100%; }
@media (min-width: 768px) {
  .col-sm-4 { width: 33.3333%; } .col-sm-6 { width: 50%; } .col-sm-8 { width: 66.6666%; } .col-sm-12 { width: 100%; }
}
@media (min-width: 992px) {
  .col-md-2 { width: 16.6666%; } .col-md-3 { width: 25%; } .col-md-4 { width: 33.3333%; }
  .col-md-5 { width: 41.6666%; } .col-md-6 { width: 50%; } .col-md-7 { width: 58.3333%; }
  .col-md-8 { width: 66.6666%; } .col-md-10 { width: 83.3333%; } .col-md-12 { width: 100%; }
  .col-md-offset-1 { margin-left: 8.3333%; } .col-md-offset-2 { margin-left: 16.6666%; }
}
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.img-responsive { display: block; max-width: 100%; height: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* ── fondo explícito ──────────────────────────────────────────────────── */
/* html y body no pintaban fondo: cada sección ponía el suyo. Donde una
   sección no lo hacía —la 404 nueva— se veía el lienzo del navegador, y los
   navegadores que oscurecen las páginas (el modo oscuro forzado de Android,
   Samsung Internet, algunos visores integrados) lo pintan negro: el título y
   los botones, en tinta oscura, desaparecían. Se declara el esquema claro y se
   pinta el fondo, así el sitio se ve igual en todos. */
:root { color-scheme: light; }
html, body { background-color: #fff; }

/* Lo que el panel todavía no activó (Instagram sin cuenta cargada). El
   atributo hidden solo no basta: los <li> del pie llevan display:flex y le
   ganan a la hoja del navegador. */
[data-sm-li][hidden] { display: none !important; }

/* Las marcas data-sm (editables.mjs) envuelven un dato dentro de su enlace:
   tienen que verse exactamente como el texto que envuelven. En la página de
   contacto, la regla de las etiquetas (".sm-datos span": chica, naranja, en
   mayúsculas) las atrapaba y el WhatsApp salía disfrazado de etiqueta. */
span[data-sm] {
  display: inline !important;
  color: inherit !important; font: inherit !important;
  letter-spacing: inherit !important; text-transform: inherit !important;
  margin: 0 !important; padding: 0 !important; background: none !important;
}

/* ── foco visible ─────────────────────────────────────────────────────── */
/* El tema clonado ponía outline:none en enlaces y botones, así que quien
   navega con el teclado no veía dónde estaba parado: se recorría el sitio a
   ciegas. Se usa :focus-visible, que no dibuja nada al hacer clic con el
   ratón. El doble trazo (bronce sobre blanco) se ve tanto en el fondo claro
   como en las franjas oscuras del pie y del hero. */
:where(a, button, select, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--sm-bronce) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .75);
  border-radius: 3px;
}
/* Sobre la barra de menú, que es oscura, el halo blanco es el que se ve. */
#header :where(a, button):focus-visible {
  outline-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .35);
}

/* Enlace de salto: invisible hasta que el teclado lo enfoca, y ahí aparece
   arriba a la izquierda por encima de la cabecera pegajosa. */
.sm-saltar {
  position: fixed; top: -100px; left: 12px; z-index: 2000;
  background: var(--sm-tinta); color: #fff !important;
  padding: 10px 16px; border-radius: 0 0 var(--sm-radio) var(--sm-radio);
  font-size: 14px; font-weight: 600; text-decoration: none !important;
  transition: top .15s ease;
}
.sm-saltar:focus { top: 0; outline: 2px solid var(--sm-bronce); outline-offset: 2px; }
/* Sin el margen, el salto deja el comienzo del contenido justo debajo de la
   barra de menú pegajosa. El contenedor no dibuja foco: el salto ya se nota
   porque la página se mueve. */
#sm-contenido { scroll-margin-top: 64px; }
#sm-contenido:focus { outline: none; }

/* ── páginas de aviso: 404 y gracias (el HTML lo arma paginas-de-aviso) ── */
.sm-aviso .sm-seccion { padding: 70px 0 90px; }
.sm-aviso-caja { max-width: 560px; }
.sm-404-numero {
  font-size: clamp(64px, 3rem + 6vw, 118px); line-height: 1;
  font-weight: 700; letter-spacing: -0.04em; color: var(--sm-linea-fuerte);
  margin: 0 0 6px;
}
.sm-aviso-tilde {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%; margin-bottom: 18px;
  background: #eef6f0; color: #2f7d4f;
}
.sm-aviso-tilde svg { width: 30px; height: 30px; }
.sm-aviso h1 { font-size: clamp(24px, 1.3rem + 1.4vw, 34px); color: var(--sm-tinta); margin: 0 0 12px; }
.sm-aviso-texto { font-size: 15.5px; line-height: 1.75; color: var(--sm-ink-suave); margin: 0 0 26px; }
.sm-aviso-botones { display: flex; flex-wrap: wrap; gap: 10px; }
.sm-aviso-ayuda { margin: 26px 0 0; font-size: 13.5px; color: var(--sm-ink-suave); }
@media (max-width: 575px) {
  .sm-aviso .sm-seccion { padding: 44px 0 60px; }
  .sm-aviso-botones .sm-boton { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 767px) { .hidden-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) { .hidden-sm { display: none !important; } }
@media (min-width: 992px) { .visible-xs, .visible-sm { display: none !important; } }

/* ── cabecera ─────────────────────────────────────────────────────────── */
/* La barra de menú se pega arriba por sí misma. Antes era el <header> entero
   el que se pegaba con top:-84px, un número calculado a mano con la altura
   de la franja de contacto; al cambiar esa franja el menú quedaba cortado.
   Con display:contents en el header y en su cuerpo, el bloque contenedor
   de la barra pasa a ser la página completa y top:0 basta. */
#header, #header .header-body { display: contents; }
#header .header-container.container {
  display: block; background: #fff; border-bottom: 1px solid var(--sm-linea);
}
#header .header-nav-bar {
  position: sticky; top: 0; z-index: 1031;
  background: var(--sm-tinta);
}
#header .header-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
#header .header-nav-bar .container { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
@media (max-width: 991px) { #header .header-nav-bar .container { justify-content: space-between; padding-top: 8px; padding-bottom: 8px; } }
#header .header-nav-bar .container::before, #header .header-nav-bar .container::after { content: none; }

/* Listas y posicionamiento del menú: antes los ponía Bootstrap. Sin esto los
   <li> pierden el float, el <ul> conserva la sangría de lista y el desplegable
   deja de ser absoluto: el menú se desparrama por toda la barra. */
#header .header-nav-main nav { display: block; }
#header .header-nav-main .nav-pills { list-style: none; margin: 0; padding: 0; }
/* En fila sólo en escritorio: en el teléfono el menú se despliega apilado. */
@media (min-width: 992px) {
  #header .header-nav-main .nav-pills { display: flex; flex-wrap: nowrap; align-items: center; }
}
#header .header-nav-main .nav-pills > li { position: relative; float: none; list-style: none; }
/* sin Bootstrap los enlaces son en línea y el relleno vertical no levanta la
   barra: quedaba una franja delgada con el texto pegado */
#header .header-nav-main .nav-pills > li > a { display: block; }
#header .header-nav-main .dropdown-menu > li > a { display: flex; }
#header .header-nav-main .dropdown-menu {
  position: absolute; top: 100%; left: 0; z-index: 1040;
  list-style: none; text-align: left;
}
#header .header-nav-main .dropdown-menu > li { list-style: none; }

/* El menú NO depende de la clase .collapse de Bootstrap: se decide acá, y
   así da igual qué hoja del tema haya sobrevivido en cada página. */
@media (min-width: 992px) {
  #header .header-nav-main { display: block !important; height: auto !important; }
  #header .header-btn-collapse-nav { display: none !important; }
  #header .feature-box.visible-xs, #header .feature-box.visible-sm { display: none !important; }
}
@media (max-width: 991px) {
  #header .header-nav-main { display: none; width: 100%; order: 3; }
  #header .header-nav-main.sm-abierto { display: block; }
  #header .header-btn-collapse-nav { display: inline-flex !important; align-items: center; gap: 8px; }
  /* los submenús se abren al tocar, no al pasar el mouse */
  #header .header-nav-main li.dropdown > .dropdown-menu { display: none !important; }
  /* El submenú va en el flujo, no flotando. El position:absolute se define
     más arriba para el escritorio y, sin anularlo, en el teléfono el submenú
     quedaba encima del contenido y medio transparente. */
  #header .header-nav-main li.dropdown.sm-desplegado > .dropdown-menu {
    display: block !important;
    position: static !important; float: none; width: 100%;
    min-width: 0; margin: 0; padding: 0;
    background: #0d1620 !important;
    border: none !important; border-radius: 0 !important; box-shadow: none !important;
    opacity: 1 !important; visibility: visible !important; transform: none !important;
  }
  #header .header-nav-main .dropdown-menu > li > a {
    color: #d7dce1 !important; padding: 12px 18px; font-size: 13.5px;
  }
  #header .header-nav-main .dropdown-menu > li > a:hover,
  #header .header-nav-main .dropdown-menu > li > a:focus {
    background: rgba(255,255,255,.07) !important; color: #fff !important; padding-left: 18px;
  }
  #header .header-nav-main .dropdown-menu > li > a::after { content: none; }
  /* sobre fondo oscuro el tono de texto del acento no se ve: va el acento */
  #header .header-nav-main .dropdown-menu .sm-ico-tipo { color: var(--sm-bronce); }
}

/* barra de accesos rápidos del teléfono: en fila, no apilada */
#header .feature-box.feature-box-style-3 {
  display: flex; align-items: center; gap: 10px; float: none !important;
  width: auto !important; margin: 0 !important;
}
#header .feature-box-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; margin: 0 !important;
  border: 1px solid rgba(255,255,255,.28) !important;
}
#header .feature-box-icon a { display: inline-flex; color: #fff; }
#header .feature-box-icon:hover { border-color: var(--sm-bronce) !important; }

/* ── botón de volver arriba ───────────────────────────────────────────── */
/* Traía el position:fixed de theme.css. En las páginas donde esa hoja ya no
   estaba, se volvía un bloque del flujo: de ahí la franja blanca bajo el pie
   y el círculo cortado al lado del WhatsApp. */
.scroll-to-top {
  position: fixed !important;
  /* Alineado al centro del botón de WhatsApp (right 18px, 52px de ancho):
     22 + 22 = 44, el mismo eje. Con 20px quedaban desalineados por 2px.
     Y justo encima de él: la base la fija --sm-flot-abajo, así los dos se
     mueven juntos cuando una página los sube (ver :root). */
  right: 22px;
  bottom: calc(var(--sm-flot-abajo) + var(--sm-flot-alto) + var(--sm-flot-aire));
  width: 44px; height: 44px; padding: 0;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: #fff; color: var(--sm-tinta);
  border: 1px solid var(--sm-linea-fuerte); border-radius: 50%;
  box-shadow: var(--sm-sombra);
  /* Se oculta con opacidad y sin eventos, no con visibility: la transición
     de visibility dejaba el botón en un estado intermedio y no aparecía. */
  opacity: 0; pointer-events: none; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 898;
}
.scroll-to-top.sm-visible { opacity: 1; pointer-events: auto; transform: none; }
/* Centinela del botón de volver arriba: mientras se vea, estamos arriba. */
.sm-centinela { position: absolute; top: 0; left: 0; width: 1px; height: 420px; pointer-events: none; opacity: 0; }
.scroll-to-top:hover { background: var(--sm-superficie); color: var(--sm-tinta); }
/* El span de dentro es el que lleva la flecha. La regla que escondía el texto
   que ponía el tema lo apagaba también, y el botón salía como un círculo
   blanco vacío encima del WhatsApp. Se esconde sólo el texto suelto. */
.scroll-to-top .sm-ico { display: inline-flex !important; align-items: center; justify-content: center; }
.scroll-to-top .sm-ico svg { width: 18px; height: 18px; display: block; }
.scroll-to-top span:not(.sm-ico) { display: none; }
@media (max-width: 767px) {
  .scroll-to-top { right: 18px; width: 40px; height: 40px; }
  .scroll-to-top .sm-ico svg { width: 16px; height: 16px; }
}

/* ── restos del tema que sí se usan ───────────────────────────────────── */
:where(.page-header) { background: var(--sm-superficie); }
.breadcrumb { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.breadcrumb li + li::before { content: '/'; margin-right: 8px; color: var(--sm-ink-suave); }
.breadcrumb .active { color: var(--sm-ink-suave); }
:where(.btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border: 1px solid transparent; border-radius: var(--sm-radio);
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer;
  background: var(--sm-superficie); color: var(--sm-ink);
}
:where(.btn-lg) { padding: 14px 26px; font-size: 15px; }
.btn-primary { background: var(--sm-bronce); border-color: var(--sm-bronce); color: #fff; }
.btn-primary:hover { background: var(--sm-bronce-osc); border-color: var(--sm-bronce-osc); color: #fff; }
select, input, textarea, button { font-family: inherit; font-size: inherit; }

/* Restos del tema que quedaron fuera del cuerpo y ahora, sin sus hojas, se
   ven como un formulario suelto arriba de todo. No se usan: el contacto va
   por WhatsApp y por correo. */
#contactForm, #property_submit_form, .contacPage, .modal, .modal-backdrop,
.section__ficha__imprimible, .footer__ficha__imprimible { display: none !important; }
/* Impresión, para todo el sitio. Los bloques «imprimibles» del tema clonado
   ya no existen; lo que se imprime es la página misma, sin el decorado. */
@media print {
  #header, .sm-pie, .oculto-impresion,
  .sm-wsp, .scroll-to-top, .sm-probador, .sm-saltar { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a { color: #000 !important; text-decoration: underline !important; }
  .section, .sm-seccion { padding: 10px 0 !important; }
  /* nada se corta entre dos hojas a media frase */
  h1, h2, h3 { break-after: avoid; }
  p, li, article { break-inside: avoid; }
}

/* ── pie: en el teléfono va de a dos columnas, no en una tira ─────────── */
@media (max-width: 575px) {
  /* minmax(0,1fr) y no 1fr: el correo es largo y estiraba su columna hasta
     dejar la otra en la mitad de ancho. */
  .sm-pie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px 16px !important; }
  .sm-pie-col a { overflow-wrap: anywhere; }
  .sm-pie-col--marca { grid-column: 1 / -1; }
  .sm-pie-col .sm-etiqueta { margin-bottom: 12px; }
  .sm-pie-col li { margin-bottom: 6px; }
  .sm-pie-col a { font-size: 12.5px; }
  .sm-pie-contacto li { gap: 7px; }
  .sm-pie-contacto svg { width: 13px; height: 13px; }
}