/* =========================================================
   RE/MAX Costa — estilos sobre Bootstrap 5.3
   Orden: variables · base · botones · header · hero/buscador
          · tarjetas · secciones home · listado · detalle · footer
   ========================================================= */

:root {
  --rx-blue: #2f5fbf;
  --rx-blue-700: #264ea0;
  --rx-navy: #1d3a82;
  --rx-ink-navy: #152a5c;
  --rx-red: #e3262e;
  --rx-red-700: #b91c22;
  --rx-ink: #2d3140;
  --rx-muted: #646b7d;   /* contraste 5.3 sobre blanco (antes #7d8496, 3.7) */
  --rx-muted-soft: #4f5668;   /* texto secundario sobre el gris azulado --rx-soft: contraste 5.3 */
  --rx-wa: #0f7a41;           /* verde de WhatsApp (contraste 5.4 con blanco) */
  --rx-call: #2e3c62;         /* botón Call: el tono que da el blanco translúcido sobre azul marino */
  --rx-line: #c9ced8;
  --rx-soft: #d6dce8;
  --rx-green: #7fe064;
  --rx-sky: #a9cff5;
  --rx-dark: #232427;
  --rx-tan: #c9a36b;

  --font-ui: "Montserrat", system-ui, sans-serif;
  --font-head: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bs-body-font-family: var(--font-ui);
  --bs-body-color: var(--rx-ink);
}

/* ---------- Base ---------- */
body { font-family: var(--font-ui); color: var(--rx-ink); }
/* nada puede desbordar el ancho de la página (Safari de iPhone a veces no recorta las fotos que crecen dentro de
   tarjetas con overflow:hidden). "clip" no crea una zona de scroll, así que no rompe los elementos sticky. */
html, body { overflow-x: clip; }
h1, h2, h3, h4 { font-family: var(--font-head); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
img { max-width: 100%; }

.py-6 { padding-top: 5rem; padding-bottom: 5rem; }
@media (min-width: 992px) { .py-6 { padding-top: 6.5rem; padding-bottom: 6.5rem; } }
.pb-6 { padding-bottom: 5rem; }
@media (min-width: 992px) { .pb-6 { padding-bottom: 6.5rem; } }

.section-title {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--rx-ink-navy);
}
.bg-soft { background: var(--rx-soft); }

/* ---------- Botones ---------- */
.btn-rx-red {
  --bs-btn-bg: var(--rx-red); --bs-btn-border-color: var(--rx-red); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--rx-red-700); --bs-btn-hover-border-color: var(--rx-red-700); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--rx-red-700); --bs-btn-active-border-color: var(--rx-red-700); --bs-btn-active-color: #fff;
  font-weight: 600;
}
.btn-rx-blue {
  --bs-btn-bg: var(--rx-blue); --bs-btn-border-color: var(--rx-blue); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--rx-blue-700); --bs-btn-hover-border-color: var(--rx-blue-700); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--rx-navy); --bs-btn-active-border-color: var(--rx-navy); --bs-btn-active-color: #fff;
  font-weight: 600;
}
.btn-rx-navy {
  --bs-btn-bg: var(--rx-ink-navy); --bs-btn-border-color: var(--rx-ink-navy); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--rx-navy); --bs-btn-hover-border-color: var(--rx-navy); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--rx-navy); --bs-btn-active-border-color: var(--rx-navy); --bs-btn-active-color: #fff;
}
.btn-arrow i { display: inline-block; transition: transform .2s ease; }
.btn-arrow:hover i { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 20; padding-top: 2.75rem;
}
.site-header--solid { position: relative; background: var(--rx-dark); padding-bottom: 1.5rem; }

.lang-tab {
  position: absolute; top: 0; right: 4%;
  background: var(--rx-red); color: #fff; text-decoration: none;
  font-size: .75rem; font-weight: 600; padding: .6rem .8rem; z-index: 2;
  /* pestaña que cuelga del borde: arriba recta, abajo redondeada como el botón del menú */
  border-radius: 0 0 .5rem .5rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.lang-tab:hover { color: #fff; background: var(--rx-red-700); }

.site-header .navbar-brand img { height: 44px; width: auto; }
.site-header .nav-link { color: #fff; font-size: .875rem; font-weight: 500; position: relative; }
.site-header .nav-link:hover,
.site-header .nav-link:focus { color: #fff; opacity: .8; }
.site-header .nav-link.active { font-weight: 700; color: #fff; }
.site-header .dropdown-menu { font-size: .85rem; }

@media (min-width: 992px) {
  /* ::before porque el ::after del menú desplegable (Properties) ya es la flechita de Bootstrap */
  .site-header .nav-link.active::before {
    content: ""; position: absolute; left: 50%; bottom: -.3rem;
    width: 1.75rem; height: 2px; background: var(--rx-red); transform: translateX(-50%);
  }
}

.btn-signin {
  color: #fff; border: 2px solid #4a6fd1; border-radius: 2rem;
  padding: .4rem 1.1rem; font-size: .85rem; background-color: transparent;
  --bs-btn-hover-color: var(--rx-ink-navy); --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: var(--rx-ink-navy); --bs-btn-active-bg: #e8edf8; --bs-btn-active-border-color: #e8edf8;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease,
              box-shadow .3s ease, transform .3s ease;
}
.btn-signin i { display: inline-block; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.btn-signin:hover,
.btn-signin:focus-visible {
  background-color: #fff; color: var(--rx-ink-navy); border-color: #fff;
  transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}
.btn-signin:hover i,
.btn-signin:focus-visible i { transform: translateX(4px); }
.btn-signin:active {
  background-color: #e8edf8; color: var(--rx-ink-navy); border-color: #e8edf8;
  transform: translateY(0) scale(.96); box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
/* con "reducir movimiento" solo cambia de color, sin moverse */
@media (prefers-reduced-motion: reduce) {
  .btn-signin { transition: background-color .3s ease, color .3s ease, border-color .3s ease !important; }
  .btn-signin:hover, .btn-signin:focus-visible, .btn-signin:active,
  .btn-signin:hover i, .btn-signin:focus-visible i { transform: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  min-height: min(92vh, 760px);
  display: flex; align-items: flex-end;
  background: #1c2b4a;
}
.hero--short { min-height: min(62vh, 520px); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  /* arriba: para el menú; abajo: degradado más largo y oscuro para que el título se lea sobre cualquier foto */
  background: linear-gradient(180deg, rgba(8,20,48,.6) 0%, rgba(8,20,48,0) 30%, rgba(8,20,48,0) 45%, rgba(8,20,48,.45) 70%, rgba(8,20,48,.78) 100%);
}
.hero-content { position: relative; z-index: 1; padding-bottom: 6.5rem; }
.hero-title { font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 400; margin-bottom: .25rem; }
.hero-sub { font-size: .95rem; opacity: .92; margin: 0; }
.hero-title, .hero-sub { text-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 18px rgba(8, 20, 48, .55); }

/* ---------- Buscador ---------- */
.search-wrap { position: relative; margin-top: -3.25rem; z-index: 5; }
.search-bar {
  background: #fff; border-radius: 3rem;
  display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.75rem;
  padding: 1rem 1.5rem;
  box-shadow: 0 18px 40px rgba(12, 30, 70, .18);
}
@media (min-width: 992px) { .search-bar { flex-wrap: nowrap; padding: 1.25rem 2rem; } }
@media (max-width: 991.98px) { .search-bar { border-radius: 1.5rem; } .btn-search { width: 100%; } }

/* Interruptor Buy / Rent: la pastilla roja (.toggle-slider) se desliza */
.toggle-op {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr;
  background: #d3d9e4; border-radius: 2rem; flex-shrink: 0; isolation: isolate;
}
.toggle-op .btn {
  position: relative; z-index: 1;
  border: 0; border-radius: 2rem !important; color: #fff; background: transparent;
  font-weight: 600; font-size: .9rem; padding: .55rem 1.4rem;
  transition: color .35s ease, opacity .35s ease;
}
.toggle-op .btn-check:not(:checked) + .btn { color: var(--rx-ink-navy); }   /* antes blanco sobre gris: 1.4:1 */
.toggle-op .btn-check:not(:checked) + .btn:hover { color: var(--rx-blue); }
.toggle-op .btn-check:checked + .btn,
.toggle-op .btn-check:checked + .btn:active { background: transparent; color: #fff; }
.toggle-slider {
  position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 50%;
  background: var(--rx-red); border-radius: 2rem;
  box-shadow: 0 4px 10px rgba(227, 38, 46, .35);
  transition: transform .5s cubic-bezier(.65, 0, .25, 1.25), box-shadow .5s ease;
}
#opRent:checked ~ .toggle-slider { transform: translateX(100%); }
.toggle-op:active .toggle-slider { transform: scaleX(1.08); }
#opRent:checked ~ .toggle-slider:is(.toggle-op:active *) { transform: translateX(100%) scaleX(1.08); }
/* con "reducir movimiento" se conserva el deslizamiento, sin rebote */
@media (prefers-reduced-motion: reduce) {
  .toggle-op .toggle-slider { transition: transform .5s ease-in-out !important; }
  .toggle-op .btn { transition: color .35s ease, opacity .35s ease !important; }
}
.search-field {
  flex: 1 1 150px; min-width: 140px;
  border: 0; border-bottom: 1px solid var(--rx-line); border-radius: 0;
  padding-left: 0; font-size: .85rem; color: var(--rx-ink);
  background-position: right 0 center;
}
.search-field:focus { box-shadow: none; border-color: var(--rx-blue); }
.btn-search {
  margin-left: auto; white-space: nowrap;
  border: 2px solid var(--rx-blue); color: var(--rx-blue);
  border-radius: 2rem; font-weight: 600; padding: .5rem 1.25rem;
  --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--rx-blue);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--rx-blue-700); --bs-btn-active-border-color: var(--rx-blue);
  background-color: transparent;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease,
              box-shadow .3s ease, transform .3s ease;
}
.btn-search i { display: inline-block; transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.btn-search:hover,
.btn-search:focus-visible {
  background-color: var(--rx-blue); color: #fff; border-color: var(--rx-blue);
  transform: translateY(-2px); box-shadow: 0 8px 18px rgba(47, 95, 191, .35);
}
.btn-search:hover i,
.btn-search:focus-visible i { transform: scale(1.2) rotate(-12deg); }
.btn-search:active {
  background-color: var(--rx-blue-700); color: #fff; border-color: var(--rx-blue);
  transform: translateY(0) scale(.97); box-shadow: 0 3px 8px rgba(47, 95, 191, .3);
}
/* con "reducir movimiento" el botón solo cambia de color, sin moverse */
@media (prefers-reduced-motion: reduce) {
  .btn-search { transition: background-color .3s ease, color .3s ease !important; }
  .btn-search:hover, .btn-search:focus-visible { transform: none; }
  .btn-search:hover i, .btn-search:focus-visible i, .btn-search:active { transform: none; }
}
/* el globo queda un poco metido dentro de la caja del buscador */
.search-pin { position: absolute; right: 9%; top: -4.1rem; width: 70px; z-index: 6; pointer-events: none; }
/* sombra del globo hecha con CSS (el SVG va sin sombra para que no se recorte) */
.search-pin, .director-pin { filter: drop-shadow(3px 4px 5px rgba(0, 0, 0, .35)); }
/* pestaña decorativa bajo el buscador (gris en el listado, azul en la home) */
.search-wrap--tab::after {
  content: ""; display: block; height: 1.4rem; margin: 0 7%;
  background: var(--tab-bg, #c3cad8); border-radius: 0 0 2rem 2rem;
}
.search-wrap--blue { --tab-bg: #224987; }

/* ---------- Tarjeta de propiedad ---------- */
.property-card {
  position: relative; background: #fff; height: 100%; display: flex; flex-direction: column;
  -webkit-tap-highlight-color: transparent;
}
/* Fotos de propiedades en 3:2 (la proporción de las cámaras profesionales; el CMS recorta todas así al subirlas) */
.ratio-3x2 { --bs-aspect-ratio: 66.6667%; }
.property-media { background: var(--rx-soft); overflow: hidden; isolation: isolate; }   /* isolation: Safari recorta bien la foto escalada */
/* Etiqueta venta/renta sobre la foto: misma forma que el "For Sale" de la ficha (una esquina recta) */
.ratio > .property-tag {
  top: 1rem; left: 1rem; width: auto; height: auto; z-index: 2;
  padding: .3rem .8rem; border-radius: .9rem .9rem .9rem 0;
  color: #fff; font-size: .7rem; font-weight: 600; letter-spacing: .02em; line-height: 1.3;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.property-tag--sale { background: var(--rx-red); }
.property-tag--rent { background: var(--rx-blue); }
.property-media img { object-fit: cover; }
/* foco con teclado: se marca toda la tarjeta */
.property-card .stretched-link:focus-visible { outline: none; }
.property-card:has(.stretched-link:focus-visible) { outline: 3px solid #ffbf47; outline-offset: 3px; }

/* Hover (solo con cursor): la foto se encoge un poco dentro de su espacio
   y deja un margen blanco alrededor */
.property-media { transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
@media (hover: hover) {
  .property-card:hover .property-media { transform: scale(.94); }
}

/* Entrada al hacer scroll (main.js agrega .js-reveal al <html> y .is-visible a cada tarjeta):
   la foto se descubre de arriba hacia abajo con un leve zoom y después aparece el texto */
.js-reveal .property-card .property-media {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s cubic-bezier(.77, 0, .18, 1) calc(var(--i, 0) * .15s),
              transform .6s cubic-bezier(.22, .61, .36, 1);
}
.js-reveal .property-card .property-media img {
  transform: scale(1.15); transition: transform 1.4s cubic-bezier(.22, .61, .36, 1) calc(var(--i, 0) * .15s);
}
.js-reveal .property-card .property-body {
  opacity: 0; transform: translateY(16px);
  transition: opacity .8s ease calc(.45s + var(--i, 0) * .15s), transform .8s ease calc(.45s + var(--i, 0) * .15s);
}
.js-reveal .property-card.is-visible .property-media { clip-path: inset(0 0 0 0); }
.js-reveal .property-card.is-visible .property-media img { transform: none; }
.js-reveal .property-card.is-visible .property-body { opacity: 1; transform: none; }

/* con "reducir movimiento": las tarjetas solo aparecen con un fundido, sin desplazarse */
@media (prefers-reduced-motion: reduce) {
  .js-reveal .property-card .property-media,
  .js-reveal .property-card .property-media img { clip-path: none; transform: none; }
  .js-reveal .property-card { opacity: 0; transition: opacity .8s ease !important; }
  .js-reveal .property-card .property-body { opacity: 1; transform: none; }
  .js-reveal .property-card.is-visible { opacity: 1; }
}
/* el encogimiento de la foto con el cursor se mantiene aunque esté activado "reducir movimiento" */
@media (prefers-reduced-motion: reduce) and (hover: hover) {
  .property-card .property-media { transition: transform .6s cubic-bezier(.22, .61, .36, 1) !important; }
  .property-card:hover .property-media,
  .js-reveal .property-card:hover .property-media { transform: scale(.94); }
}

/* Celular (pantallas táctiles): botón "View Property" con flecha */
.property-btn { display: none; }
@media (hover: none) {
  .property-btn {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    margin-top: auto; padding: .55rem 1.25rem;
    border: 2px solid var(--rx-blue); border-radius: 2rem;
    color: var(--rx-blue); font-size: .8rem; font-weight: 600; letter-spacing: .02em;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
  }
  .property-btn i { font-size: 1rem; }
  /* .property-card delante: la regla base de .property-feats va más abajo y si no, le quitaba este margen */
  .property-card .property-feats { margin-bottom: 1.25rem; }
  .property-card:active .property-btn { background: var(--rx-blue); color: #fff; transform: scale(.97); }
}
.property-body { padding: 1.5rem 1.75rem; flex: 1; display: flex; flex-direction: column; }
.property-title { font-family: var(--font-ui); font-size: 1rem; font-weight: 600; margin: 0 0 .3rem; }
.property-title a { color: var(--rx-ink); text-decoration: none; transition: color .3s ease; }
.property-card:hover .property-title a { color: var(--rx-blue); }
.property-loc { font-size: .75rem; color: var(--rx-muted); margin-bottom: .6rem; }
.property-price {
  font-size: 1.25rem; font-weight: 700; color: var(--rx-blue);
  margin: 0; padding-bottom: .9rem; border-bottom: 1px solid #8c93a3;
}
.property-price small, .property-price span { font-size: .72rem; font-weight: 500; color: var(--rx-muted); }
.property-price span { margin-left: .5rem; }
.property-feats {
  display: flex; gap: 1.25rem; list-style: none; padding: 0; margin: 1rem 0 0;
  font-size: .75rem; color: var(--rx-muted);
}
.property-feats i { font-size: 1.2rem; color: var(--rx-blue); margin-right: .35rem; vertical-align: -.2rem; }

/* ---------- Home: estadísticas ---------- */
.stats-band { background: var(--rx-blue); color: #fff; padding-bottom: 5.5rem; }
.stat-num { display: block; font-family: var(--font-head); font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: 300; line-height: 1; }
.stat-label { display: block; font-size: .7rem; margin-top: .45rem; opacity: .9; }
.intro-lead {
  font-family: var(--font-head); font-weight: 300;
  font-size: clamp(1.25rem, 2.4vw, 1.9rem); line-height: 1.35; max-width: 52rem;
}

/* ---------- Home: agentes ---------- */
.agents-section { position: relative; overflow: hidden; background: var(--rx-navy); color: #fff; }
.agents-section::before {
  content: ""; position: absolute; right: -180px; top: -60px;
  width: 520px; height: 520px; border-radius: 50%; background: var(--rx-blue);
}
.agents-section > .container-xl { position: relative; }
/* Tarjeta del director: la foto sobresale arriba a la derecha y el globo arriba a la izquierda */
.director-card {
  position: relative; background: #fff; color: var(--rx-ink-navy);
  width: 100%; max-width: 300px; min-height: 290px; margin-top: 4rem;
  border-radius: 1.1rem; padding: 0 1.9rem 2.4rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  font-family: var(--font-head);
}
@media (min-width: 992px) { .director-card { margin-top: 0; } }
.director-photo {
  position: absolute; top: -3rem; right: -.6rem;
  width: 55%; aspect-ratio: 154 / 166; object-fit: cover;
  border-radius: .9rem; background: var(--rx-soft);
}
.director-pin { position: absolute; left: .75rem; top: -3.9rem; width: 76px; }
.director-mail {
  color: var(--rx-ink-navy); font-size: .95rem; text-decoration: none;
  margin-bottom: 1.4rem; overflow-wrap: anywhere;
}
.director-mail:hover { color: var(--rx-blue); text-decoration: underline; }
.director-name { color: inherit; font-family: var(--font-head); font-size: 1.3rem; font-weight: 400; margin: 0; line-height: 1.2; }
.director-role { font-size: .95rem; }
.agent img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .5rem; background: #34508f; }
.agent-name { margin: .6rem 0 0; font-size: .9rem; font-weight: 500; font-family: var(--font-ui); }
.agent-role { font-size: .72rem; opacity: .8; }

/* ---------- Home: testimonios (bento) ---------- */
.avatar-stack img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; margin-left: -10px; }
.avatar-stack img:first-child { margin-left: 0; }
.bento-card { position: relative; overflow: hidden; border-radius: .9rem; height: 100%; }
.bento-label { font-size: .7rem; opacity: .9; margin: 0; }

.story-hero {
  min-height: 420px; color: #fff; padding: 1.5rem 1.75rem;
  display: flex; flex-direction: column; justify-content: space-between;
}
.story-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.55)); }
.story-hero > :not(img) { position: relative; z-index: 1; }
.story-hero blockquote { font-family: var(--font-head); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.3; max-width: 28rem; margin: 0 0 .5rem; }

.fact-card { background: var(--rx-green); color: var(--rx-ink-navy); padding: 1.5rem 1.75rem; display: flex; flex-direction: column; min-height: 320px; }
.fact-num { font-family: var(--font-head); font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 300; line-height: 1; margin-top: auto; }
.fact-text { font-family: var(--font-head); font-size: 1.15rem; line-height: 1.3; margin: .75rem 0 1rem; }

.story-mini img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: .9rem; }
.story-mini h3 { font-size: 1.2rem; font-weight: 400; color: var(--rx-ink-navy); margin-top: .35rem; }

.quote-card { background: var(--rx-sky); padding: 1.5rem 1.75rem; display: flex; flex-direction: column; min-height: 320px; }
.quote-card::after {
  content: ""; position: absolute; right: -60px; bottom: -60px;
  width: 200px; height: 200px; border-radius: 50%; background: var(--rx-blue);
}
.quote-card blockquote { font-family: var(--font-head); font-size: clamp(1.25rem, 2vw, 1.6rem); color: var(--rx-ink-navy); line-height: 1.3; margin: 1.25rem 0 2rem; max-width: 36rem; }
.quote-card cite { font-style: normal; font-size: .85rem; color: var(--rx-ink-navy); position: relative; z-index: 1; }
/* Home: los 4 artículos más recientes del blog en mosaico; toda la tarjeta es enlace */
.story-title { font-family: var(--font-head); font-size: clamp(1.3rem, 2.1vw, 1.75rem); font-weight: 400; line-height: 1.25; max-width: 30rem; margin: 0; color: #fff; }
.story-by { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin: 0; font-size: .875rem; color: #fff; }
.story-by img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.7); }
.story-by span { opacity: .7; }
.story-hero .story-title { margin-bottom: .9rem; }
.story-hero--small { min-height: 420px; }
.story-title--sm { font-size: clamp(1.2rem, 1.6vw, 1.4rem); }
@media (max-width: 991.98px) { .story-hero.story-link { min-height: 340px; } }
.story-link { display: flex; text-decoration: none; color: inherit; }
.story-hero.story-link { color: #fff; }
.story-hero.story-link > div { margin-top: auto; }
.story-hero--small .story-foot { flex-direction: column; align-items: flex-start; gap: .8rem; }
.story-link:focus-visible { outline: 3px solid var(--rx-blue); outline-offset: 3px; }
.story-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.story-more { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem 1.1rem; border-radius: 2rem; font-size: .875rem; font-weight: 600;
  background: #fff; color: var(--rx-ink-navy); transition: background-color .2s ease, color .2s ease; }
.story-link:hover .story-more { background: var(--rx-ink-navy); color: #fff; }
.story-hero.story-link:hover > img { transform: scale(1.03); }
.story-hero.story-link { overflow: hidden; }
.story-hero > img { transition: transform .5s ease; }
@media (prefers-reduced-motion: reduce) { .story-hero > img { transition: none; } }

/* ---------- Home: preguntas frecuentes ---------- */
.faq-section {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, #2334d6 0%, #1c2db0 55%, #0b1850 100%);
}
.faq-section::before {
  content: ""; position: absolute; right: 16%; top: 3.5rem;
  width: 84px; height: 84px; background: #3d6bf0;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
}
.faq-filter { background: rgba(255,255,255,.2); border-radius: 2rem; padding: .25rem; display: inline-flex; gap: .25rem; }
.faq-filter .btn { color: #fff; border: 0; border-radius: 2rem; font-size: .75rem; padding: .3rem 1rem; }
.faq-filter .btn.active { background: #fff; color: var(--rx-ink-navy); }

.faq-grid { position: relative; }
.faq-card { background: #fff; color: var(--rx-ink); border-radius: .6rem; padding: 1.25rem; height: 100%; font-size: .78rem; transition: opacity .3s ease; }
.faq-card h3 { font-family: var(--font-ui); font-size: .85rem; font-weight: 600; margin: .75rem 0 .6rem; line-height: 1.35; }
.faq-card { position: relative; }
.faq-card h3 a { color: inherit; text-decoration: none; }
.faq-card h3 a::after { content: ""; position: absolute; inset: 0; }   /* toda la tarjeta abre la pregunta en /faq */
.faq-card h3 a:focus-visible { outline: none; }
.faq-card:has(a:focus-visible) { outline: 2px solid #fff; outline-offset: 3px; }
.faq-card p { color: #555b69; margin: 0; }
.faq-icon { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #e4e7ef; color: var(--rx-ink-navy); font-weight: 700; font-size: .8rem; }
.faq-item:first-child .faq-icon { background: var(--rx-blue); color: #fff; }
.faq-grid.is-collapsed .is-extra .faq-card { opacity: .28; pointer-events: none; }
.faq-see-all { position: absolute; width: auto; left: 50%; bottom: 3.5rem; transform: translateX(-50%); z-index: 2; }
.faq-grid:not(.is-collapsed) .faq-see-all { display: none; }

/* ---------- CTA roja ---------- */
.cta-band {
  position: relative; overflow: hidden; color: #fff; padding: 7rem 0;
  background: linear-gradient(90deg, #e3262e 0%, #d8383f 60%, #d0444a 100%);   /* antes terminaba en rosa #f38a88: 2.4:1 */
}
/* Figura lateral del diseño: arco grande + dos líneas horizontales + dos esquinas redondeadas.
   Es un SVG usado como máscara, así el color de la línea sale de --cta-line; la derecha va en espejo. */
.cta-band { --cta-line: rgba(90, 20, 20, .5); }
.cta-band::before, .cta-band::after {
  content: ""; position: absolute; top: 0; height: 100%; aspect-ratio: 470 / 545; pointer-events: none;
  background-color: var(--cta-line);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 470 545'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3'%3E%3Ccircle cx='143.7' cy='306' r='322.4'/%3E%3Cpath d='M0 192H445.2M0 403H451.1M122 192V45A45 45 0 0 1 167 0M122 545V455A52 52 0 0 1 174 403'/%3E%3C/g%3E%3C/svg%3E") left center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 470 545'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3'%3E%3Ccircle cx='143.7' cy='306' r='322.4'/%3E%3Cpath d='M0 192H445.2M0 403H451.1M122 192V45A45 45 0 0 1 167 0M122 545V455A52 52 0 0 1 174 403'/%3E%3C/g%3E%3C/svg%3E") left center / contain no-repeat;
}
.cta-band::before { left: 0; }
.cta-band::after { right: 0; transform: scaleX(-1); }
@media (max-width: 767.98px) { .cta-band::before, .cta-band::after { opacity: .45; } }
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { font-weight: 300; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.25; }
.btn-cta { background: var(--rx-red-700); color: #fff; border-radius: 2rem; padding: .6rem 1.75rem; }
.btn-cta:hover { background: #95151a; color: #fff; }

/* ---------- Listado ---------- */
/* ---------- Detalle ---------- */
.gallery-btn { display: block; width: 100%; border: 0; padding: 0; background: var(--rx-soft); }
.gallery-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-main { aspect-ratio: 16/10; }
/* en escritorio la foto principal llena la altura de la columna (miniaturas + botón), así la etiqueta
   y el contador quedan sobre la foto en cualquier ancho */
@media (min-width: 992px) { .gallery-main { aspect-ratio: auto; height: 100%; min-height: 560px; } }
.gallery-thumb { aspect-ratio: 1; }
/* pistas de que hay más fotos: contador sobre la foto principal y "+N" en la última miniatura */
.gallery-count {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 2; pointer-events: none;
  display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border-radius: 2rem;
  background: rgba(10, 12, 18, .62); color: #fff; font-size: .75rem; font-weight: 500;
}
.gallery-count i { font-size: .95rem; }
.gallery-more { position: relative; overflow: hidden; }
.gallery-more::after { content: ""; position: absolute; inset: 0; background: rgba(10, 14, 28, .55); transition: background-color .3s ease; }
.gallery-more:hover::after { background: rgba(10, 14, 28, .4); }
.gallery-more-count {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  color: #fff; font-family: var(--font-head); font-size: clamp(1.25rem, 2.4vw, 1.9rem); letter-spacing: -.01em;
}
.gallery-btn { cursor: zoom-in; }
.gallery-btn.no-ring:focus-visible { outline: none; }
.badge-sale {
  position: absolute; left: 2.25rem; bottom: -1.1rem; z-index: 2;
  background: var(--rx-red); color: #fff; font-weight: 600; font-size: .95rem;
  padding: .55rem 1.4rem; border-radius: 1.5rem 1.5rem 1.5rem 0;
}

.detail-title { font-size: clamp(1.4rem, 2.2vw, 1.75rem); font-weight: 400; color: var(--rx-ink-navy); margin: 0; }
.detail-loc { font-size: .8rem; color: var(--rx-muted); margin: .25rem 0 .5rem; }
.detail-price { font-size: 1.3rem; color: var(--rx-blue); font-weight: 500; margin: 0; }
.detail-meta { display: flex; align-items: center; gap: 1rem; font-size: .78rem; color: var(--rx-muted); }
.detail-meta strong { color: var(--rx-blue); font-weight: 600; font-size: .95rem; margin-left: .4rem; }
.detail-meta .sep { width: 1px; height: 28px; background: var(--rx-line); }
@media (min-width: 992px) { .detail-meta, .detail-actions { justify-content: flex-end; } }
.btn-chip { background: var(--rx-blue); color: #fff; font-size: .72rem; padding: .3rem .9rem; border-radius: .2rem; }
.btn-chip:hover, .btn-chip.is-liked { background: var(--rx-ink-navy); color: #fff; }

.ribbon-exclusive {
  display: inline-block; background: var(--rx-tan); color: #2b2410; font-weight: 600; font-size: .8rem;
  padding: 1.1rem 3.25rem 1.1rem 1.25rem;
  clip-path: polygon(0 0, 100% 0, 86% 50%, 100% 100%, 0 100%);
}
.detail-section-title { font-family: var(--font-ui); font-weight: 600; color: var(--rx-blue); font-size: 1.25rem; margin-bottom: 1.25rem; }
.detail-copy { font-size: .8rem; line-height: 1.6; color: #4a4f5c; max-width: 36rem; }
.detail-divider { border: 0; border-top: 1px solid #6c7384; opacity: 1; margin: 3rem 0; }
.feature-stat strong { display: block; font-weight: 500; font-size: .9rem; }
/* mismos íconos que en las tarjetas del listado */
.feature-stat strong i { font-size: 1.35rem; color: var(--rx-blue); margin-right: .45rem; vertical-align: -.25rem; }
.feature-stat span { font-size: .72rem; color: var(--rx-muted); }

.amenities { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem 1.5rem; font-size: .78rem; color: #7a8192; }
@media (min-width: 768px) { .amenities { grid-template-columns: repeat(3, 1fr); } }
.amenities i { font-size: 1.15rem; color: var(--rx-ink-navy); margin-right: .6rem; vertical-align: -.2rem; }

.agent-label { font-size: .72rem; color: var(--rx-blue); }

.video-cover { position: relative; display: block; width: 100%; aspect-ratio: 16/9; border: 0; padding: 0; background: #1c2b4a; }
.video-cover img { width: 100%; height: 100%; object-fit: cover; }
.video-cover .play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 4.5rem; background: rgba(0,0,0,.15); }
.tour-box { display: grid; place-items: center; aspect-ratio: 16/10; background: #2a3246; color: #fff; text-decoration: none; font-size: 2rem; }
.tour-box:hover { color: #fff; background: var(--rx-ink-navy); }


.location-map { position: relative; min-height: 440px; background: #dfe3ea; padding: 3rem 0; }
@media (min-width: 992px) { .location-map { min-height: 520px; } }
/* el mapa queda de fondo; la tarjeta flota encima sin bloquear el resto del mapa */
.location-map-canvas { position: absolute; inset: 0; z-index: 0; background: #dfe3ea; font-family: var(--font-ui); }
/* Tema RE/MAX para el mapa: OpenStreetMap teñido de azul (sin API key).
   Para un mapa gris neutro usa: grayscale(1) contrast(.85) brightness(1.08) */
.location-map-canvas .leaflet-tile-pane { filter: grayscale(1) sepia(.4) hue-rotate(180deg) saturate(1.6) brightness(1.04) contrast(.88); }
/* esri-gray se recolorea en main.js (RxRecolorLayer), sin filtros en vivo; esri-street va tal cual */
.location-map-canvas[data-tiles^="esri"] .leaflet-tile-pane { filter: none; }
.location-map-canvas:focus { outline: none; }
.location-map-canvas:focus-visible { outline: 3px solid var(--rx-blue); outline-offset: -3px; }
/* controles de zoom */
.location-map .leaflet-bar, .listing-map .leaflet-bar { border: 0; border-radius: .6rem; overflow: hidden; box-shadow: 0 6px 16px rgba(12, 30, 70, .25); }
.location-map .leaflet-bar a, .listing-map .leaflet-bar a {
  width: 36px; height: 36px; line-height: 36px; font-size: 1.2rem;
  background: var(--rx-ink-navy); color: #fff; border-bottom-color: rgba(255, 255, 255, .15);
}
.location-map .leaflet-bar a:hover, .location-map .leaflet-bar a:focus-visible, .listing-map .leaflet-bar a:hover, .listing-map .leaflet-bar a:focus-visible { background: var(--rx-blue); color: #fff; }
.location-map .leaflet-bar a.leaflet-disabled, .listing-map .leaflet-bar a.leaflet-disabled { background: #43507a; color: rgba(255, 255, 255, .5); }
/* ventanita del pin */
.location-map .leaflet-popup-content-wrapper { background: var(--rx-ink-navy); color: #fff; border-radius: .6rem; box-shadow: 0 8px 20px rgba(12, 30, 70, .3); }
.location-map .leaflet-popup-tip { background: var(--rx-ink-navy); }
.location-map .leaflet-popup-content { margin: .7rem 1.1rem; font-size: .85rem; font-family: var(--font-ui); }
.location-map .leaflet-container a.leaflet-popup-close-button { color: rgba(255, 255, 255, .7); }
.location-map .leaflet-container a.leaflet-popup-close-button:hover { color: #fff; }
.location-map .leaflet-control-attribution, .listing-map .leaflet-control-attribution { font-size: .65rem; background: rgba(255, 255, 255, .75); }
.location-map > .container-xl { position: relative; z-index: 1; pointer-events: none; }
.location-map .neighborhood-card { pointer-events: auto; }
.location-map .leaflet-marker-icon { filter: drop-shadow(3px 4px 5px rgba(0, 0, 0, .35)); }
.neighborhood-card { position: relative; background: rgba(40, 42, 48, .9); color: #fff; border-radius: .75rem; padding: 2rem; max-width: 380px; font-size: .78rem; margin-left: auto; }
.summary-media { position: relative; width: min(340px, 100%); margin-top: 1rem; z-index: 2; }
.location-map + .summary-block .summary-media { margin-top: -5.5rem; }   /* se monta sobre el mapa solo si lo hay */
.summary-media img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
.summary-media .badge-sale { left: 1.5rem; }
/* renta: la misma etiqueta en azul (el CMS pone .badge-rent y el texto For Rent) */
.badge-sale.badge-rent { background: var(--rx-blue); }

.request-section { background: linear-gradient(90deg, #3f6ee0, #2a72c9); color: #fff; }   /* antes terminaba en #4ab6dc: 2.3:1 */
.request-title { font-family: var(--font-ui); font-weight: 700; font-size: 1.4rem; }
.request-section .form-control { border: 0; border-radius: 0; font-size: .85rem; }
.request-section .invalid-feedback { color: #fff; font-weight: 600; }

/* ---------- Footer ---------- */
.footer-title { font-size: 1.6rem; font-weight: 400; color: var(--rx-ink-navy); line-height: 1.2; }
.footer-heading { font-family: var(--font-ui); font-size: .8rem; font-weight: 600; color: var(--rx-ink-navy); margin-bottom: .9rem; }
.footer-links { list-style: none; padding: 0; margin: 0; font-size: .8rem; }
.footer-links a { color: var(--rx-blue); text-decoration: none; line-height: 1.9; }   /* antes #7f98d6: 2.9:1 */
.footer-links a:hover { color: var(--rx-ink-navy); }
.newsletter { display: flex; align-items: center; max-width: 360px; border: 1px solid var(--rx-line); border-radius: 2rem; padding: .3rem; }
.newsletter > i { padding: 0 .5rem 0 .8rem; color: var(--rx-muted); }
.newsletter input { flex: 1; min-width: 0; border: 0; font-size: .8rem; background: transparent; }
.newsletter input:focus { outline: none; }
.newsletter .btn { font-size: .75rem; padding: .4rem 1rem; border-radius: 2rem; }
/* la parte blanca deja aire bajo el boletín; flow-root evita que el margen negativo del logo
   "colapse" con el de la franja oscura (antes se comía el espacio y el boletín quedaba pegado) */
.footer-top > .container-xl { padding-bottom: 5.5rem; }
.footer-brand { display: flow-root; background: var(--rx-dark); padding-bottom: 2rem; }
/* el logo va en dos piezas: palabra RE/MAX + globo (en el logo original el globo mide 12.25 % del ancho) */
.footer-logo-wrap { position: relative; width: min(100%, 720px); margin: -2rem auto 0; }
.footer-logo { display: block; width: 100%; }
/* se centra la palabra RE/MAX (no el conjunto): el logo se recorre a la izquierda la mitad del espacio del globo.
   En celular no, para que el globo no se salga de la pantalla. */
@media (min-width: 768px) { .footer-logo-wrap { transform: translateX(-6.56%); } }
.footer-pin { position: absolute; left: 0; top: 0; width: 12.25%; height: auto; filter: drop-shadow(3px 4px 5px rgba(0, 0, 0, .35)); }

/* ---------- Footer revelado (main.js agrega .has-reveal-footer) ----------
   La franja oscura queda fija al fondo; la página y la parte blanca del footer pasan por encima
   y, al llegar al final, la descubren. El globo vive en una capa superior y aparece con un
   fundido hacia arriba solo cuando la franja ya está descubierta. */
.has-reveal-footer main,
.has-reveal-footer .footer-top { position: relative; z-index: 1; background: #fff; }
.has-reveal-footer .footer-top { margin-bottom: var(--footer-brand-h, 0px); }
.has-reveal-footer .footer-brand { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; }
.has-reveal-footer .footer-pin {
  position: fixed; z-index: 5; pointer-events: none;
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}
.has-reveal-footer .footer-pin.is-shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .has-reveal-footer .footer-pin { transform: none; transition: opacity .3s ease !important; }
}
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2.25rem; list-style: none; padding: 3rem 0 0; margin: 0; font-size: .78rem; }
.footer-legal a { color: #e2e4ea; text-decoration: none; }
.footer-legal a:hover { color: #fff; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Móvil: el gutter g-5 (3rem) es más ancho que el padding del contenedor
   y provoca scroll horizontal; en pantallas chicas se reduce ---------- */
@media (max-width: 767.98px) {
  .g-5, .gx-5 { --bs-gutter-x: 1.5rem; }
}

/* ---------- Preloader (una vez por visita; ver script en <head>) ----------
   Secuencia: cae el globo → se rellenan sus franjas → aparece "RE/MAX" → la cortina sube.
   Todo es CSS: si main.js no carga, la cortina igual se retira sola. */
.preloader { display: none; }
.rx-intro .preloader {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 2000;
  background: var(--rx-dark);
  clip-path: inset(0 0 0 0); /* valor inicial para que la cortina se interpole */
  animation: pl-out .7s cubic-bezier(.77, 0, .18, 1) 1.8s forwards;
}
.preloader-logo { width: min(340px, 70vw); height: auto; overflow: visible; }
.pl-pin {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: pl-drop .65s cubic-bezier(.22, .61, .36, 1) .1s both;
}
.pl-pin-colors {
  clip-path: inset(0 0 100% 0);
  animation: pl-wipe .55s cubic-bezier(.77, 0, .18, 1) .45s forwards;
}
.pl-word {
  clip-path: inset(0 100% 0 0);
  animation: pl-wipe .8s cubic-bezier(.77, 0, .18, 1) .85s forwards;
}
@keyframes pl-drop {
  from { opacity: 0; transform: translateY(-60%) scale(.7); }
  to   { opacity: 1; transform: none; }
}
@keyframes pl-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes pl-out  { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
@keyframes pl-fade { to { opacity: 0; visibility: hidden; } }

/* con "reducir movimiento": el logo aparece completo y la capa solo se desvanece */
@media (prefers-reduced-motion: reduce) {
  .rx-intro .preloader { animation: pl-fade .4s ease .9s forwards; }
  .pl-pin, .pl-pin-colors, .pl-word { animation: none; clip-path: none; }
}

/* ---------- CTA azul (Blog y Contacto) ---------- */
.cta-band--blue { background: linear-gradient(90deg, #5b8ee6 0%, #2f63c4 50%, #1846a6 100%); }
.cta-band--blue { --cta-line: rgba(10, 25, 80, .55); }
.cta-band--blue .btn-cta { background: #45a3f2; }
.cta-band--blue .btn-cta:hover { background: #2d8ee0; }

/* ---------- Filtro claro (variante del filtro del FAQ) ---------- */
.faq-filter--light { background: #e6eaf2; align-self: flex-start; }
.faq-filter--light .btn { color: var(--rx-ink-navy); }
.faq-filter--light .btn:hover { background: rgba(21, 42, 92, .08); }
.faq-filter--light .btn.active { background: var(--rx-ink-navy); color: #fff; }

/* ---------- Blog: listado ---------- */
.blog-intro { padding: 3.5rem 0 3rem; }
.blog-title { font-family: var(--font-ui); font-weight: 700; color: var(--rx-blue); font-size: clamp(2rem, 3vw, 2.4rem); margin: 0; }
.blog-sub { font-weight: 500; color: var(--rx-ink-navy); font-size: 1.1rem; margin: .25rem 0 0; }

.blog-list { padding-bottom: 6rem; }
/* línea separadora solo entre artículos visibles (funciona también al filtrar) */
.post-row:not([hidden]) ~ .post-row:not([hidden])::before {
  content: ""; display: block; width: min(45%, 620px); margin: 5rem auto;
  border-top: 1px solid #6c7384;
}
.post-media { position: relative; min-height: 340px; background: var(--rx-soft); overflow: hidden; }
.post-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22, .61, .36, 1); }
@media (hover: hover) { .post-row:hover .post-media img { transform: scale(1.03); } }
@media (min-width: 992px) { .post-media { min-height: 640px; } }

/* recuadro oscuro sobre la foto (en el CMS: "frase destacada") */
.post-caption {
  position: absolute; left: 0; bottom: 0; width: min(88%, 520px); margin: 0;
  background: rgba(18, 32, 62, .88); color: #fff; /* sin desenfoque: es costoso sobre fotos grandes */
  padding: 1.75rem 1.5rem 2rem;
}
.post-caption::before { content: ""; display: block; width: 60px; border-top: 1px solid rgba(255, 255, 255, .7); margin-bottom: 1.1rem; }
.post-caption p { font-size: .95rem; font-weight: 500; line-height: 1.45; margin: 0; max-width: 22rem; }
@media (min-width: 992px) {
  .post-caption { width: 75%; padding: 2.5rem 3rem 3rem; }
  .post-caption p { font-size: 1.05rem; }
}

.post-body { padding: 2.5rem 1.25rem 0; text-align: center; }
.post-body > * { max-width: 30rem; margin-left: auto; margin-right: auto; }
@media (min-width: 992px) { .post-body { padding: 1rem 3rem 0; } }
.post-kw { font-size: .8rem; color: var(--rx-ink-navy); margin-bottom: 1rem; }
.post-kw span { display: block; color: var(--rx-blue); }
.post-title { font-family: var(--font-head); font-weight: 400; color: #1f2537; font-size: clamp(1.9rem, 3.2vw, 2.9rem); line-height: 1.1; margin-bottom: 1.5rem; }
.post-title a { color: inherit; text-decoration: none; transition: color .3s ease; }
.post-title a:hover { color: var(--rx-blue); }
.post-lead { font-size: .85rem; color: #4a4f5c; max-width: 26rem; }
.post-meta { font-size: .72rem; color: var(--rx-muted); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .25rem 0; margin-top: 1.5rem; }
.post-meta a { color: var(--rx-blue); text-decoration: none; margin-left: .3rem; font-size: .8rem; }
.post-meta a:hover { text-decoration: underline; }
.post-meta .sep { display: inline-block; width: 1px; height: 20px; background: var(--rx-line); margin: 0 .75rem; }
.post-rule { width: 45%; margin: 1.75rem auto; border: 0; border-top: 1px solid var(--rx-blue); opacity: .45; }
.post-excerpt { text-align: left; }
.post-excerpt p { font-size: .82rem; line-height: 1.65; color: #4a4f5c; }
.post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 2rem; }

.blog-empty { color: var(--rx-muted); padding: 3rem 0; }

/* paginación: el número actual lleva el globo encima */
.blog-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.75rem; margin-top: 6rem; }
.blog-pagination-label { color: var(--rx-blue); font-size: .85rem; }
.blog-pagination ol { display: flex; gap: .35rem; list-style: none; padding: 0; margin: 0; }
.blog-pagination a {
  position: relative; display: grid; place-items: center; min-width: 1.9rem; height: 1.9rem;
  color: var(--rx-muted); text-decoration: none; font-size: .95rem; border-radius: .3rem;   /* antes #9aa3b5: 2.5:1 */
}
.blog-pagination a:hover { color: var(--rx-ink-navy); background: #eef1f6; }
.blog-pagination a[aria-current="page"] { color: var(--rx-ink-navy); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.blog-pagination a[aria-current="page"]::before {
  content: ""; position: absolute; left: 50%; top: -1.5rem; transform: translateX(-50%);
  width: 18px; height: 21px; background: url("../img/pin-logo.svg") center / contain no-repeat;
}
/* "Next": pill con contorno, más evidente que los números */
.blog-pagination .blog-pagination-next { margin-left: .75rem; }
.blog-pagination .blog-pagination-next a {
  display: inline-flex; align-items: center; gap: .4rem; height: 2.4rem; padding: 0 1.15rem; border: 1px solid var(--rx-blue); border-radius: 2rem;
  color: var(--rx-blue); font-size: .9rem; font-weight: 500; background: transparent;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.blog-pagination .blog-pagination-next i { transition: transform .25s ease; }
.blog-pagination .blog-pagination-next a:hover, .blog-pagination .blog-pagination-next a:focus-visible { background: var(--rx-ink-navy); border-color: var(--rx-ink-navy); color: #fff; }
.blog-pagination .blog-pagination-next a:hover i { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .blog-pagination .blog-pagination-next a:hover i { transform: none; } }
/* en Properties (fondo gris): menos aire arriba y el resaltado al pasar el mouse en blanco */
.blog-pagination--listing { margin-top: 4.5rem; }
.blog-pagination--listing a { color: var(--rx-muted-soft); }
.blog-pagination--listing .blog-pagination-label { color: var(--rx-blue-700); }
.blog-pagination--listing a:hover { background: #fff; }

/* ---------- Blog: artículo ---------- */
.article-head { padding: 2.5rem 0 3rem; }
.article-crumbs { font-size: .78rem; margin-bottom: 2.5rem; }
.article-crumbs a { color: var(--rx-blue); text-decoration: none; }
.article-head-inner { max-width: 46rem; }
.article-head-inner .post-lead { margin-left: auto; margin-right: auto; font-size: .95rem; max-width: 34rem; }
.article-title { font-size: clamp(2rem, 4vw, 3.25rem); }

.article-hero { position: relative; margin-bottom: 4rem; }
.article-hero img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--rx-soft); }
@media (min-width: 768px) { .article-hero img { aspect-ratio: 21 / 9; } }
.article-hero .post-caption { left: calc(var(--bs-gutter-x) * .5); }

.article-body { max-width: 44rem; font-size: .95rem; line-height: 1.75; color: #3d4250; }
.article-body h2 { font-size: 1.6rem; font-weight: 400; color: var(--rx-ink-navy); margin: 2.75rem 0 1rem; }
.article-body ul { padding-left: 1.2rem; }
.article-body li { margin-bottom: .45rem; }
.article-intro { font-size: 1.15rem; line-height: 1.6; color: var(--rx-ink-navy); }
/* cita editorial: comillas grandes en azul arriba del texto (sin raya lateral) */
.article-quote { position: relative; margin: 3rem 0; padding-top: 2.6rem; }
.article-quote::before { content: "\201C"; position: absolute; top: -.75rem; left: -.15rem; font-family: Georgia, "Times New Roman", serif; font-size: 5.5rem; line-height: 1; color: var(--rx-blue); }
.article-quote p { font-family: var(--font-head); font-size: 1.65rem; line-height: 1.35; color: var(--rx-ink-navy); margin-bottom: .75rem; }
.article-quote cite { font-style: normal; font-size: .8rem; color: var(--rx-muted); }
.article-share {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin: 3.5rem 0 2.5rem; padding: 1.25rem 0;
  border-top: 1px solid var(--rx-line); border-bottom: 1px solid var(--rx-line);
}
.article-share > span { font-size: .85rem; color: var(--rx-muted); margin-right: .5rem; }
.article-author { display: flex; gap: 1.25rem; align-items: flex-start; background: #f3f5f9; border-radius: 1rem; padding: 1.75rem; margin-bottom: 5rem; }
.article-author img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.article-author-name { font-weight: 600; color: var(--rx-ink-navy); margin: 0 0 .35rem; }
.article-author-bio { font-size: .85rem; line-height: 1.6; margin: 0; }

.blog-card { position: relative; background: #fff; border-radius: .75rem; overflow: hidden; height: 100%; transition: transform .35s ease, box-shadow .35s ease; }
.blog-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--rx-soft); }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20, 40, 90, .12); }
.blog-card-body { padding: 1.25rem 1.5rem 1.5rem; }
.blog-card h3 { font-family: var(--font-ui); font-size: 1rem; font-weight: 600; line-height: 1.4; margin-bottom: .6rem; }
.blog-card h3 a { color: var(--rx-ink-navy); text-decoration: none; }
.blog-card:hover h3 a { color: var(--rx-blue); }
.blog-card time { font-size: .75rem; color: var(--rx-muted); }
.blog-card:has(.stretched-link:focus-visible) { outline: 3px solid #ffbf47; outline-offset: 3px; }
.blog-card .stretched-link:focus-visible { outline: none; }

/* ---------- Contacto ---------- */
.contact-hero { position: relative; padding-top: 11rem; }
.contact-hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 7rem;
  background: linear-gradient(180deg, #03050f 0%, #0f1d47 40%, #22408a 100%);
}
.contact-hero > .container-xl { position: relative; }
.contact-card { display: grid; max-width: 1000px; margin: 0 auto; }
@media (min-width: 992px) { .contact-card { grid-template-columns: 1fr 1fr; align-items: start; } }

.contact-red { position: relative; z-index: 1; background: var(--rx-red); color: #fff; padding: 4.5rem 1.5rem 2.25rem; }
.contact-pin { position: absolute; top: -2.75rem; left: 1.5rem; width: 80px; filter: drop-shadow(3px 4px 5px rgba(0, 0, 0, .35)); }
.contact-title { font-family: var(--font-head); font-weight: 400; font-size: clamp(2.25rem, 3.5vw, 2.75rem); margin: 0 0 .75rem; }
.contact-red p { font-size: .82rem; font-weight: 600; line-height: 1.45; max-width: 20rem; margin: 0; }
.contact-dark { background: var(--rx-dark); color: #fff; padding: 2.25rem 1.5rem 2.5rem; }
.contact-dark h2 { font-size: 1.3rem; font-weight: 400; margin: 0 0 .5rem; }
.contact-dark hr { width: 4.5rem; border: 0; border-top: 2px solid var(--rx-red); opacity: 1; margin: 1.5rem 0; }
.contact-lines { list-style: none; padding: 0; margin: 0; font-family: var(--font-head); font-size: 1.15rem; line-height: 1.5; }
.contact-lines--sm { font-family: var(--font-ui); font-size: .85rem; line-height: 1.9; }
.contact-lines a { color: #fff; text-decoration: none; }
.contact-lines a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-address { font-size: .82rem; font-weight: 600; line-height: 1.55; margin: 0; }
.contact-hours { display: block; margin-top: .6rem; font-weight: 400; font-size: .75rem; opacity: .75; }
@media (min-width: 992px) {
  .contact-red { padding: 4.75rem 3rem 2.75rem 5.75rem; box-shadow: 14px 0 26px rgba(0, 0, 0, .18); }
  .contact-pin { left: 5.75rem; width: 86px; }
  .contact-dark { padding: 2.5rem 3rem 2.75rem 5.75rem; }
}

.contact-form-wrap { background: #e9eef7; padding: 3rem 1.5rem; border-radius: 0 0 2rem 0; }
@media (min-width: 992px) { .contact-form-wrap { padding: 4.25rem 4.5rem 4rem 4.5rem; min-height: calc(100% + 2rem); } }
.contact-form-title { font-family: var(--font-head); font-weight: 400; font-size: 1.4rem; color: #1f2537; margin-bottom: 2rem; }
.contact-form { position: relative; }
.contact-form .form-control, .contact-form .form-select {
  border: 1px solid #cfd6e4; border-radius: 0; font-size: .82rem; padding: .8rem 1rem; color: var(--rx-ink);
}
.contact-form .form-control:focus, .contact-form .form-select:focus { border-color: var(--rx-blue); box-shadow: 0 0 0 3px rgba(47, 95, 191, .15); }
.contact-form .form-select:invalid, .contact-form .form-select option[value=""] { color: #5b6372; }
.contact-required {
  position: absolute; top: -.95rem; right: 0; z-index: 1;
  background: var(--rx-blue); color: #fff; font-size: .65rem; padding: .3rem .75rem; border-radius: .2rem .2rem .2rem 0;
}
.contact-required::after { content: ""; position: absolute; left: 0; bottom: -6px; border-left: 7px solid #23479a; border-bottom: 6px solid transparent; }
@media (min-width: 992px) { .contact-required { right: -2.25rem; } }
.btn-send {
  background: #0d1a4a; color: #fff; border-radius: 2rem; padding: .85rem 2.25rem;
  font-weight: 700; font-size: .85rem; letter-spacing: .02em;
}
.btn-send i { margin-left: .9rem; font-size: 1.2rem; vertical-align: -.2rem; }
.btn-send:hover, .btn-send:focus-visible { background: var(--rx-navy); color: #fff; }
.contact-sent { margin: 1.5rem 0 0; font-size: .85rem; font-weight: 600; color: #1d7a46; text-align: center; }

.contact-disclaimer { padding: 5rem 0 6rem; }
.contact-disclaimer .container-xl > * { max-width: 54rem; margin-left: auto; margin-right: auto; }
.contact-disclaimer h2 { font-family: var(--font-ui); font-size: .95rem; font-weight: 600; color: var(--rx-ink); margin-bottom: 1rem; }
.contact-disclaimer p { font-size: .78rem; line-height: 1.6; color: #4a4f5c; margin: 0; }
.contact-disclaimer a { color: var(--rx-blue); }
/* al validar solo se marcan los errores; los campos correctos no se pintan de verde */
.contact-form.was-validated .form-control:valid,
.contact-form.was-validated .form-select:valid { border-color: #cfd6e4; background-image: none; padding-right: 1rem; }
.contact-form.was-validated .form-select:valid { background-image: var(--bs-form-select-bg-img); padding-right: 2.25rem; }

/* ---------- Agentes ---------- */
/* Director destacado sobre banda azul (misma familia visual que la sección de agentes de la Home) */
.director-band { position: relative; overflow: hidden; background: var(--rx-navy); color: #fff; padding: 4.5rem 0 5rem; }
.director-band::before {
  content: ""; position: absolute; right: -180px; top: -120px;
  width: 520px; height: 520px; border-radius: 50%; background: var(--rx-blue);
}
.director-band > .container-xl { position: relative; }
.director-feature { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 992px) { .director-feature { grid-template-columns: 340px 1fr; gap: 4rem; } }
.director-feature-media { position: relative; max-width: 340px; }
.director-feature-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1rem; background: #34508f; }
.director-feature-pin { position: absolute; left: -1.25rem; top: -2.25rem; width: 76px; z-index: 1; filter: drop-shadow(3px 4px 5px rgba(0, 0, 0, .35)); }
.director-feature-label { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rx-sky); margin-bottom: .5rem; }
.director-feature .director-feature-name { font-family: var(--font-head); font-weight: 400; color: #fff; font-size: clamp(2rem, 3.5vw, 2.75rem); margin: 0 0 1rem; }
.director-feature-bio { font-size: .95rem; line-height: 1.65; max-width: 36rem; opacity: .92; margin-bottom: 1.25rem; }

/* chips de idioma */
.agent-langs { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.agent-langs li { font-size: .7rem; font-weight: 600; letter-spacing: .04em; padding: .15rem .5rem; border: 1px solid var(--rx-line); border-radius: 1rem; color: var(--rx-muted); }
.agent-langs--light li { border-color: rgba(255, 255, 255, .45); color: #fff; }

/* datos de contacto (el email abre la ventana del formulario) */
.agent-tile-contact { list-style: none; padding: 0; margin: 0; font-size: .8rem; }
.agent-tile-contact li + li { margin-top: .3rem; }
.agent-tile-contact a, .agent-tile-contact button {
  display: inline-flex; align-items: center; gap: .45rem; max-width: 100%;
  border: 0; background: none; padding: 0; color: var(--rx-ink); text-decoration: none; text-align: left; overflow-wrap: anywhere;
}
.agent-tile-contact i { color: var(--rx-blue); font-size: 1rem; flex-shrink: 0; }
.agent-tile-contact a:hover, .agent-tile-contact button:hover { color: var(--rx-blue); text-decoration: underline; text-underline-offset: 3px; }
.agent-tile-contact--light a, .agent-tile-contact--light button { color: #fff; font-size: .9rem; }
.agent-tile-contact--light i { color: var(--rx-sky); }
.agent-tile-contact--light a:hover, .agent-tile-contact--light button:hover { color: #fff; }

/* botones WhatsApp / Email / Llamar */
.agent-tile-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.btn-wa, .btn-mail, .btn-call { border-radius: 2rem; font-size: .78rem; font-weight: 600; padding: .45rem 1rem; display: inline-flex; align-items: center; gap: .35rem; }
.btn-wa i, .btn-mail i, .btn-call i { font-size: 1.05rem; }
.btn-wa { background: var(--rx-wa); color: #fff; border: 1.5px solid var(--rx-wa); }
.btn-wa:hover, .btn-wa:focus-visible { background: #0b6334; border-color: #0b6334; color: #fff; }
.btn-mail { background: transparent; color: var(--rx-ink-navy); border: 1.5px solid var(--rx-ink-navy); }
.btn-mail:hover, .btn-mail:focus-visible { background: var(--rx-ink-navy); color: #fff; }
.btn-mail--light { color: #fff; border-color: #fff; }
.btn-mail--light:hover, .btn-mail--light:focus-visible { background: #fff; color: var(--rx-ink-navy); }
.btn-call { background: var(--rx-blue); color: #fff; border: 1.5px solid var(--rx-blue); }
.btn-call:hover, .btn-call:focus-visible { background: var(--rx-blue-700); border-color: var(--rx-blue-700); color: #fff; }

/* cuadrícula y filtros */
.agents-grid-section { background: var(--rx-soft); padding: 4rem 0 6rem; }
.agent-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem;
  background: #fff; border-radius: 1.25rem; padding: 1rem 1.5rem; margin-bottom: 2.5rem;
  box-shadow: 0 12px 30px rgba(12, 30, 70, .08);
}
@media (min-width: 992px) { .agent-filters { border-radius: 3rem; padding: .9rem 2rem; } }
.agent-search { flex: 1 1 220px; display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--rx-line); }
.agent-search i { color: var(--rx-muted); }
.agent-search input { flex: 1; min-width: 0; border: 0; padding: .45rem 0; font-size: .85rem; background: transparent; }
.agent-search input:focus { outline: none; }
.agent-search:focus-within { border-color: var(--rx-blue); }
.agent-filters .search-field { flex: 0 1 190px; }
.agent-count { margin: 0 0 0 auto; font-size: .75rem; color: var(--rx-muted); white-space: nowrap; }
.agent-empty { padding: 3rem 0; color: var(--rx-muted); }

/* tarjeta de agente */
.agent-tile { background: #fff; border-radius: .9rem; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform .35s ease, box-shadow .35s ease; scroll-margin-top: 6rem; }
.agent-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(20, 40, 90, .12); }
.agent-tile-photo { position: relative; display: block; width: 100%; border: 0; padding: 0; background: var(--rx-soft); overflow: hidden; }
.agent-tile-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .8s cubic-bezier(.22, .61, .36, 1); }
.agent-tile-more {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .8rem 1.1rem;
  background: linear-gradient(180deg, rgba(21, 42, 92, 0), rgba(21, 42, 92, .92));
  color: #fff; font-size: .75rem; font-weight: 600; text-align: left;
  transform: translateY(100%); transition: transform .35s ease;
}
.agent-tile-photo:hover img { transform: scale(1.04); }
.agent-tile-photo:hover .agent-tile-more, .agent-tile-photo:focus-visible .agent-tile-more { transform: none; }
@media (hover: none) { .agent-tile-more { transform: none; } }
.agent-tile-body { padding: 1.25rem 1.25rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.agent-tile-name { font-family: var(--font-ui); font-size: 1.05rem; font-weight: 600; color: var(--rx-ink-navy); margin: 0; }
.agent-tile-role { font-size: .75rem; color: var(--rx-muted); margin: .1rem 0 .7rem; }
.agent-tile .agent-tile-actions { margin-top: auto; padding-top: 1.25rem; }

/* panel de perfil */
.agent-panel { --bs-offcanvas-width: min(440px, 100vw); border-left: 0 !important; }
.agent-panel-close { position: absolute; top: 1rem; right: 1rem; z-index: 2; background-color: #fff; border-radius: 50%; padding: .65rem; opacity: 1; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
.agent-panel-photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--rx-soft); }
.agent-panel-content { padding: 1.75rem 2rem 2.5rem; }
.agent-panel-name { font-family: var(--font-head); font-weight: 400; font-size: 1.9rem; color: var(--rx-ink-navy); margin: 0; }
.agent-bio { font-size: .9rem; line-height: 1.65; margin: .5rem 0 1.5rem; }
.agent-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; margin: 0; padding: 1.25rem 0; border-top: 1px solid var(--rx-line); border-bottom: 1px solid var(--rx-line); }
.agent-facts dt { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rx-muted); }
.agent-facts dd { font-size: .85rem; color: var(--rx-ink-navy); font-weight: 500; margin: .2rem 0 0; }
.agent-panel-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }

/* ventana de correo al agente */
.agent-mail { border: 0; border-radius: 1rem; }   /* sin overflow:hidden: la lista de países del teléfono puede salir de la ventana */
.agent-mail-head { border-radius: 1rem 1rem 0 0; display: flex; align-items: center; gap: 1rem; background: var(--rx-ink-navy); color: #fff; padding: 1.25rem 1.5rem; }
.agent-mail-head img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; background: #34508f; }
.agent-mail-kicker { font-size: .72rem; opacity: .8; margin: 0; }
.agent-mail-title { font-family: var(--font-head); font-weight: 400; font-size: 1.35rem; margin: 0; }
.agent-mail-form { padding: 1.75rem 1.5rem 2rem; }
.agent-mail-note { font-size: .72rem; color: var(--rx-muted); text-align: center; margin: 1rem 0 1.25rem; }
.agent-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.agent-mail-sent { padding: 3rem 2rem; }
.agent-mail-sent i { font-size: 3rem; color: #1d7a46; display: block; margin-bottom: .5rem; }
/* en la cuadrícula: cada botón parte del ancho de su texto y el espacio sobrante se reparte igual,
   así WhatsApp y Email tienen el mismo margen alrededor del texto; correos largos se recortan con "…" */
.agent-tile .agent-tile-actions { display: flex; flex-wrap: nowrap; }
.agent-tile .agent-tile-actions .btn { flex: 1 1 auto; justify-content: center; padding-left: .75rem; padding-right: .75rem; }
.agent-tile .agent-tile-contact button { width: 100%; }
.agent-tile .agent-tile-contact button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* el panel y la ventana reciben el foco al abrirse: sin contorno en el contenedor */
.agent-panel:focus, .agent-panel:focus-visible, #agentMailModal:focus, #agentMailModal:focus-visible { outline: none; }
/* Agentes: cada tarjeta entra con un fundido y sube un poco; las de una fila, escalonadas.
   Se anima la columna (.agent-item) para no chocar con el hover de la tarjeta. */
.js-reveal .agent-item {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s ease calc(var(--i, 0) * .12s), transform .8s cubic-bezier(.22, .61, .36, 1) calc(var(--i, 0) * .12s);
}
.js-reveal .agent-item.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .agent-item { transform: none; transition: opacity .8s ease !important; }
}
/* en pantallas chicas el globo del director no sale del borde */
@media (max-width: 991.98px) {
  .director-feature-pin { left: .5rem; }
  /* celular/tablet: misma alineación que las tarjetas de los agentes (foto a todo lo ancho y botones parejos) */
  .director-feature { gap: 2rem; }
  .director-feature-media { max-width: none; }
  .director-feature-photo { aspect-ratio: 1; object-position: center 20%; }
  .director-feature .agent-tile-actions { flex-wrap: nowrap; }
  .director-feature .agent-tile-actions .btn { flex: 1 1 0; justify-content: center; }
}

/* ---------- Subrayado animado ----------
   En lugar del subrayado fijo al pasar el mouse, una línea que se dibuja de izquierda a derecha.
   (Los enlaces dentro de párrafos largos se quedan subrayados siempre, por accesibilidad.) */
.footer-links a, .footer-legal a, .contact-lines a, .post-meta a, .director-mail, .article-crumbs a,
.agent-tile-contact :is(a, button) span {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  padding-bottom: 1px;
  transition: background-size .35s cubic-bezier(.22, .61, .36, 1), color .3s ease;
}
:is(.footer-links a, .footer-legal a, .contact-lines a, .post-meta a, .director-mail, .article-crumbs a):is(:hover, :focus-visible),
.agent-tile-contact :is(a, button):is(:hover, :focus-visible) span {
  text-decoration: none; background-size: 100% 1px;
}
.agent-tile-contact a:hover, .agent-tile-contact button:hover { text-decoration: none; }

/* Menú: al pasar el mouse crece desde el centro la misma raya roja de la página activa */
@media (min-width: 992px) {
  .site-header .nav-link::before {
    content: ""; position: absolute; left: 50%; bottom: -.3rem;
    width: 1.75rem; height: 2px; background: var(--rx-red);
    transform: translateX(-50%) scaleX(0); transition: transform .35s cubic-bezier(.22, .61, .36, 1);
  }
  .site-header .nav-link:hover::before, .site-header .nav-link:focus-visible::before,
  .site-header .nav-link.active::before { transform: translateX(-50%) scaleX(1); }
  .site-header .nav-link:hover, .site-header .nav-link:focus { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .nav-link::before { transition: none; }
}

/* ---------- Transiciones entre páginas (View Transitions) ----------
   Chrome, Edge y Safari animan el cambio de página; los navegadores sin soporte cambian normal.
   · Fundido discreto: la página que sale se desvanece y la nueva aparece.
   · El encabezado tiene nombre propio: se queda en su lugar en vez de parpadear.
   · "property-photo" y "blog-photo": la foto de la tarjeta viaja a la foto principal del detalle
     (main.js le pone el nombre solo a la tarjeta que se tocó). */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.gallery-main img { view-transition-name: property-photo; }
.article-hero img { view-transition-name: blog-photo; }
.article-hero .post-caption { view-transition-name: blog-caption; }

::view-transition-old(root) { animation: rx-vt-out .4s ease both; }
::view-transition-new(root) { animation: rx-vt-in .55s ease .12s both; }
@keyframes rx-vt-out { to { opacity: 0; } }
@keyframes rx-vt-in { from { opacity: 0; } }

::view-transition-group(site-header) { animation-duration: .55s; }
::view-transition-group(property-photo),
::view-transition-group(blog-photo) {
  animation-duration: .6s; animation-timing-function: cubic-bezier(.22, .61, .36, 1); z-index: 50;
}
/* una sola foto viaja: se oculta la versión de salida y la de llegada crece desde la tarjeta
   (mezclar las dos, con encuadres distintos, se veía como foto doble o "fantasma") */
::view-transition-old(property-photo), ::view-transition-old(blog-photo) { animation: none; opacity: 0; }
::view-transition-new(property-photo), ::view-transition-new(blog-photo) { animation: none; }
/* el recuadro de texto del blog: el de salida se desvanece rápido y el de llegada aparece al final
   (mezclar los dos mostraba el texto duplicado) */
::view-transition-group(blog-caption) { animation-duration: .6s; animation-timing-function: cubic-bezier(.22, .61, .36, 1); z-index: 51; }
::view-transition-old(blog-caption) { animation: rx-vt-out .18s ease both; }
::view-transition-new(blog-caption) { animation: rx-vt-in .3s ease .4s both; }
/* la foto se recorta como "cover" mientras cambia de proporción (tarjeta 4:3 → foto panorámica) */
::view-transition-old(property-photo), ::view-transition-new(property-photo),
::view-transition-old(blog-photo), ::view-transition-new(blog-photo) {
  width: 100%; height: 100%; object-fit: cover; overflow: clip;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .01s !important; animation-delay: 0s !important; }
}

/* ---------- Página de FAQs ---------- */
.faq-tools { margin: 2rem 0 1.25rem; }
.faq-cats { flex-wrap: wrap; }
@media (max-width: 767.98px) {
  /* en celular las categorías se deslizan de lado en una sola línea */
  .faq-cats { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .faq-cats .btn { white-space: nowrap; }
}
.faq-list-section { background: var(--rx-soft); padding: 4rem 0 6rem; }
.faq-list { max-width: 52rem; } /* alineada a la izquierda, igual que el título, el buscador y los filtros */
.faq-group + .faq-group { margin-top: 3rem; }
.faq-group-title { display: flex; align-items: center; gap: .55rem; font-family: var(--font-ui); font-weight: 600; font-size: 1.35rem; color: var(--rx-ink-navy); margin-bottom: 1rem; }
.faq-group-title i { color: var(--rx-blue); font-size: 1.35rem; }

.faq-acc-item { background: #fff; border-radius: .6rem; margin-top: .6rem; box-shadow: 0 4px 14px rgba(12, 30, 70, .05); scroll-margin-top: 6rem; transition: box-shadow .3s ease; }
.faq-acc-item.is-target { box-shadow: 0 0 0 2px var(--rx-blue), 0 8px 20px rgba(12, 30, 70, .1); }
.faq-acc-q { margin: 0; }
.faq-acc-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border: 0; background: none; text-align: left; padding: 1.1rem 1.4rem;
  font-family: var(--font-ui); font-weight: 600; font-size: .92rem; line-height: 1.4; color: var(--rx-ink-navy);
}
.faq-acc-btn span { transition: color .3s ease; }
.faq-acc-btn:hover span { color: var(--rx-blue); }
.faq-acc-btn i {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: #e4e7ef; color: var(--rx-ink-navy); font-size: 1rem;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), background-color .3s ease, color .3s ease;
}
.faq-acc-btn:not(.collapsed) i { transform: rotate(45deg); background: var(--rx-blue); color: #fff; }
.faq-acc-a { padding: 0 1.4rem 1.3rem; font-size: .88rem; line-height: 1.7; color: #4a4f5c; }
.faq-acc-a p { margin-bottom: .75rem; max-width: 42rem; }
.faq-copy { border: 0; background: none; padding: 0; display: inline-flex; align-items: center; gap: .35rem; color: var(--rx-blue); font-size: .75rem; font-weight: 600; }
.faq-copy:hover span { text-decoration: underline; text-underline-offset: 3px; }
.faq-empty { padding: 3rem 0; color: var(--rx-muted); }

/* bloque final con formulario */
.faq-ask { position: relative; overflow: hidden; background: var(--rx-navy); color: #fff; padding: 5rem 0; }
.faq-ask::before { content: ""; position: absolute; left: -200px; bottom: -220px; width: 520px; height: 520px; border-radius: 50%; background: var(--rx-blue); }
.faq-ask > .container-xl { position: relative; }
.faq-ask-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 992px) { .faq-ask-grid { grid-template-columns: 1fr 1.3fr; gap: 4rem; } }
.faq-ask-title { font-family: var(--font-head); font-weight: 400; font-size: clamp(2rem, 3.5vw, 2.6rem); color: #fff; margin-bottom: 1rem; }
.faq-ask-text p { font-size: .95rem; line-height: 1.6; opacity: .92; max-width: 26rem; }
.faq-ask-alt { font-size: .8rem !important; margin: 1.75rem 0 .6rem; }
.faq-ask-form-wrap { background: #e9eef7; color: var(--rx-ink); border-radius: 1rem; padding: 2rem 1.5rem; }
@media (min-width: 992px) { .faq-ask-form-wrap { padding: 2.75rem 3rem; } }

/* ---------- Superficies del navegador con la marca (selección, cursor, scroll) ---------- */
::selection { background: var(--rx-blue); color: #fff; }
html { scrollbar-color: #9aa3b5 transparent; }
/* íconos ocultos hasta que carga su fuente (ver main.js): evita letras raras en conexiones lentas */
html:not(.icons-ready) .ti::before { visibility: hidden; }

input, textarea { caret-color: var(--rx-blue); }

/* ---------- About us ---------- */
.about-display {
  font-family: var(--font-head); font-weight: 400; color: var(--rx-ink-navy);
  font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08; letter-spacing: -.015em;
  text-wrap: balance; margin-bottom: 1.5rem;
}
.about-display--center { text-align: center; margin-bottom: 4.5rem; }

/* portada */
.about-hero { position: relative; min-height: min(90vh, 820px); display: flex; align-items: flex-end; overflow: hidden; color: #fff; background: #1c2b4a; }
/* rotador de fondo: fundido cruzado de 1.6 s + zoom lento ("Ken Burns") mientras cada foto está visible */
.about-hero-slides { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }   /* las capas de las fotos no se cruzan con el degradado */
.about-hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.6s ease-in-out; will-change: opacity, transform;
}
/* la que entra aparece ENCIMA; la que sale se queda completa debajo (con su zoom) hasta que la nueva cubre todo:
   así nunca hay un momento con las dos a medias y no se asoma el fondo (antes «parpadeaba» al cambiar) */
.about-hero-slide.is-active, .about-hero-slide.is-leaving { opacity: 1; animation: rx-kenburns 9.5s linear both; }
.about-hero-slide.is-active { z-index: 1; }
.about-hero-slide.is-leaving { z-index: 0; transition: none; }
.about-hero-slide:nth-child(even) { transform-origin: 70% 40%; }
.about-hero-slide:nth-child(odd) { transform-origin: 30% 60%; }
@keyframes rx-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  .about-hero-slide.is-active, .about-hero-slide.is-leaving { animation: none; }
}
.about-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 20, 48, .55) 0%, rgba(8, 20, 48, 0) 28%, rgba(8, 20, 48, .1) 55%, rgba(8, 20, 48, .7) 100%); }
.about-hero-content { position: relative; z-index: 1; padding-bottom: 5rem; }
.about-hero-title { font-family: var(--font-head); font-weight: 400; font-size: clamp(2.6rem, 6.2vw, 5.6rem); line-height: 1; letter-spacing: -.03em; margin: 0 0 1.5rem; text-wrap: balance; }
.about-hero-sub { font-size: 1.05rem; line-height: 1.55; max-width: 34rem; opacity: .92; margin: 0; }

/* quiénes somos: composición final (también en celular y sin animación) */
.about-story { padding: 6rem 0; }
.about-story-frame { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 992px) { .about-story-frame { grid-template-columns: 45% 1fr; gap: 4.5rem; } }
.about-story-media { margin: 0; overflow: hidden; background: var(--rx-soft); }
.about-story-media img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 991.98px) { .about-story-media img { aspect-ratio: 4 / 3; } }
.about-story-text p { font-size: .98rem; line-height: 1.75; color: #3d4250; max-width: 34rem; }
.about-story-sign { font-family: var(--font-head); font-size: 1.25rem !important; color: var(--rx-blue) !important; margin-top: 1.75rem; }

/* quiénes somos: momento de movimiento (main.js agrega .is-pinned en escritorio).
   La foto queda fija, se recorta de panorámica a columna izquierda y el texto entra por la derecha.
   Solo se animan clip-path, transform y opacity (ligeros). --p va de 0 a 1 con el scroll. */
.about-story.is-pinned { height: 180vh; padding: 0; }
.is-pinned .about-story-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.is-pinned .about-story-frame { position: relative; display: block; width: 100%; height: min(78vh, 720px); }
.is-pinned .about-story-media {
  position: absolute; inset: 0 calc(var(--bs-gutter-x) * .5);
  clip-path: inset(calc(14% * (1 - var(--c, 0))) calc(55% * var(--c, 0)) calc(14% * (1 - var(--c, 0))) 0);
  will-change: clip-path;
}
.is-pinned .about-story-media img { width: 100%; height: 100%; aspect-ratio: auto; transform: scale(calc(1.12 - .12 * var(--c, 0))); transform-origin: left center; }
.is-pinned .about-story-text {
  position: absolute; top: 50%; left: calc(50% + 2rem); right: calc(var(--bs-gutter-x) * .5);
  opacity: var(--t, 0);
  transform: translate(calc((1 - var(--t, 0)) * 60px), -50%);
}

/* cifras como frase editorial */
.about-figures { background: var(--rx-ink-navy); color: #fff; padding: 7rem 0; }
.about-figures-text { font-family: var(--font-head); font-weight: 300; font-size: clamp(1.8rem, 3.6vw, 3.1rem); line-height: 1.32; letter-spacing: -.01em; max-width: 62rem; margin: 0 auto; text-align: center; text-wrap: balance; }
.about-figures-text strong { font-weight: 500; color: var(--rx-sky); }

/* línea del tiempo vertical alterna; la línea azul se dibuja con el scroll (--tl de 0 a 1) */
.about-timeline-section { padding: 7rem 0; }
.about-timeline { position: relative; list-style: none; padding: 0; margin: 0 auto; max-width: 64rem; }
.about-timeline::before, .about-timeline::after { content: ""; position: absolute; top: 0; bottom: 0; left: 1rem; width: 2px; }
.about-timeline::before { background: var(--rx-line); }
.about-timeline::after { background: var(--rx-blue); transform-origin: top; transform: scaleY(var(--tl, 1)); }
.tl-item { position: relative; padding: 0 0 4rem 3.5rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: calc(1rem - 8px); top: .9rem; width: 18px; height: 18px; border-radius: 50%; z-index: 1;
  background: #fff; border: 2px solid var(--rx-line); transition: background-color .4s ease, border-color .4s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
}
.tl-item.is-reached::before { background: var(--rx-blue); border-color: var(--rx-blue); transform: scale(1.15); }
.tl-year { font-family: var(--font-head); font-weight: 300; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.02em; color: var(--rx-blue); margin: 0 0 .75rem; }
.tl-card h3 { font-family: var(--font-ui); font-weight: 600; font-size: 1.1rem; color: var(--rx-ink-navy); margin: 0 0 .5rem; }
.tl-card p:not(.tl-year) { font-size: .92rem; line-height: 1.7; color: #4a4f5c; margin: 0; max-width: 26rem; }
.tl-card img { display: block; width: 100%; max-width: 26rem; aspect-ratio: 3 / 2; object-fit: cover; border-radius: .75rem; margin-top: 1.5rem; background: var(--rx-soft); }
@media (min-width: 768px) {
  .about-timeline::before, .about-timeline::after { left: 50%; margin-left: -1px; }
  .tl-item { width: 50%; padding: 0 3.5rem 5rem 0; text-align: right; }
  .tl-item::before { left: auto; right: -9px; }
  .tl-item:nth-child(even) { margin-left: 50%; padding: 0 0 5rem 3.5rem; text-align: left; }
  .tl-item:nth-child(even)::before { right: auto; left: -9px; }
  .tl-item:nth-child(odd) .tl-card p:not(.tl-year), .tl-item:nth-child(odd) .tl-card img { margin-left: auto; }
  /* los hitos se enciman un poco para que la línea no quede con huecos largos */
  .tl-item + .tl-item { margin-top: -2.5rem; }
  .tl-item:last-child { padding-bottom: 0; }
}

/* en qué creemos: filas editoriales */
.about-values { padding: 6rem 0 7rem; background: var(--rx-soft); }
.values-list { margin: 3rem 0 0; }
.values-row { display: grid; gap: .75rem 3rem; padding: 2.25rem 0; border-top: 1px solid #b9c1d1; }
.values-row:last-child { border-bottom: 1px solid #b9c1d1; }
@media (min-width: 992px) { .values-row { grid-template-columns: 5fr 7fr; align-items: baseline; } }
.values-row dt { font-family: var(--font-head); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; color: var(--rx-ink-navy); }
.values-row dd { margin: 0; font-size: .98rem; line-height: 1.7; color: #3d4250; max-width: 36rem; }


/* ---------- Botones principales: un solo estilo ----------
   Tipo título (no mayúsculas), Montserrat 500, mismo tamaño en todas las píldoras. */
.btn-rx-navy, .btn-rx-red, .btn-rx-blue, .btn-cta, .btn-send {
  font-family: var(--font-ui); font-size: .9rem; font-weight: 500; letter-spacing: 0; text-transform: none;
}
.btn-rx-navy.rounded-pill, .btn-rx-red.rounded-pill, .btn-rx-blue.rounded-pill, .btn-cta, .btn-send { padding: .6rem 1.6rem; }
.btn-send i { margin-left: .5rem; font-size: 1rem; vertical-align: -.1rem; }

/* ---------- Páginas legales (Privacy Policy, Terms of Use) ---------- */
.legal-head { padding: 3.5rem 0 3rem; border-bottom: 1px solid var(--rx-line); }
.legal-updated { font-size: .8rem; color: var(--rx-muted); margin: .5rem 0 1.75rem; }
.legal-intro { max-width: 48rem; }
.legal-intro p { font-size: 1.05rem; line-height: 1.7; color: #3d4250; }
.legal-body { padding: 3.5rem 0 7rem; }
.legal-grid { display: grid; gap: 2rem; }
@media (min-width: 992px) { .legal-grid { grid-template-columns: 260px 1fr; gap: 5rem; align-items: start; } }

/* índice: fijo al bajar en escritorio, desplegable en celular */
.legal-toc { font-size: .85rem; }
@media (min-width: 992px) { .legal-toc { position: sticky; top: 2rem; } }
.legal-toc summary { font-weight: 600; color: var(--rx-ink-navy); cursor: pointer; margin-bottom: .75rem; list-style: none; }
.legal-toc summary::-webkit-details-marker { display: none; }
@media (min-width: 992px) { .legal-toc summary { pointer-events: none; } }
@media (max-width: 991.98px) {
  .legal-toc details { background: #f3f5f9; border-radius: .75rem; padding: 1rem 1.25rem; }
  .legal-toc summary::after { content: "+"; float: right; color: var(--rx-blue); }
  .legal-toc details[open] summary::after { content: "−"; }
}
.legal-toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--rx-line); }
.legal-toc a {
  display: block; padding: .4rem 0 .4rem 1rem; margin-left: -1px; border-left: 2px solid transparent;
  color: var(--rx-muted); text-decoration: none; line-height: 1.35; transition: color .25s ease, border-color .25s ease;
}
.legal-toc a:hover { color: var(--rx-ink-navy); }
.legal-toc a.is-current { color: var(--rx-blue); border-left-color: var(--rx-blue); font-weight: 500; }

.legal-content { max-width: 46rem; }
.legal-section { scroll-margin-top: 2rem; }
.legal-section + .legal-section { margin-top: 3rem; }
.legal-content h2 { font-family: var(--font-head); font-weight: 400; font-size: 1.65rem; color: var(--rx-ink-navy); margin-bottom: 1rem; }
.legal-content p, .legal-content li { font-size: .95rem; line-height: 1.75; color: #3d4250; max-width: 37rem; } /* ~70–75 caracteres por línea */
.legal-content ul { padding-left: 1.2rem; margin-bottom: 1rem; }
.legal-content li { margin-bottom: .4rem; }
.legal-content strong { color: var(--rx-ink-navy); font-weight: 600; }
.legal-content a { color: var(--rx-blue); text-underline-offset: 3px; }
.footer-legal a[aria-current="page"] { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer-legal .footer-copy { color: #9aa0ad; }

/* About: el último hito ("hoy") se distingue con el rojo de la marca */
.tl-item:last-child.is-reached::before { background: var(--rx-red); border-color: var(--rx-red); box-shadow: 0 0 0 6px rgba(227, 38, 46, .15); }

/* agentes clicables (About): toda la tarjeta lleva al perfil */
.agent-link { display: block; color: inherit; text-decoration: none; border-radius: .5rem; }
.agent-link img { transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease; }
.agent-link:hover img, .agent-link:focus-visible img { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0, 0, 0, .3); }
.agent-link:hover .agent-name, .agent-link:focus-visible .agent-name { text-decoration: underline; text-underline-offset: 4px; }
.agent-link:hover, .agent-link:focus-visible { color: #fff; }
.director-name a { color: inherit; text-decoration: none; }
.director-name a:hover, .director-name a:focus-visible { color: var(--rx-blue); text-decoration: underline; text-underline-offset: 4px; }

/* botón azul marino sobre una banda azul: un contorno blanco lo separa del fondo */
.btn-on-navy { --bs-btn-border-color: rgba(255, 255, 255, .55); --bs-btn-hover-bg: #fff; --bs-btn-hover-color: var(--rx-ink-navy); --bs-btn-hover-border-color: #fff; border-width: 1.5px; }

/* enlace dentro del texto de la historia */
.about-story-text a { color: var(--rx-blue); text-underline-offset: 3px; }

/* ---------- About: "Come say hola" (mapa de la oficina) ---------- */
.office-map { position: relative; min-height: 600px; display: flex; align-items: center; padding: 4rem 0; background: #e5e7ec; }
.office-map-canvas { position: absolute; inset: 0; z-index: 0; }
.office-map-inner { position: relative; z-index: 1; pointer-events: none; }
.office-card {
  pointer-events: auto; background: #fff; border-radius: 1rem; padding: 2.5rem 2.25rem;
  max-width: 420px; box-shadow: 0 24px 50px rgba(12, 30, 70, .18);
}
.office-title { font-family: var(--font-head); font-weight: 400; font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1.05; color: var(--rx-ink-navy); margin-bottom: .75rem; }
.office-lead { font-size: .92rem; line-height: 1.6; color: #3d4250; margin-bottom: 1.5rem; }
.office-address { font-family: var(--font-head); font-size: 1.15rem; line-height: 1.45; color: var(--rx-ink-navy); font-style: normal; padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--rx-line); }
.office-facts { display: grid; gap: .9rem; margin: 0 0 1.75rem; }
.office-facts > div { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; }
.office-facts dt { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rx-muted); padding-top: .15rem; }
.office-facts dd { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--rx-ink); }
.office-facts a { color: var(--rx-ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size .35s cubic-bezier(.22, .61, .36, 1); }
.office-facts a:hover, .office-facts a:focus-visible { background-size: 100% 1px; }
.office-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (min-width: 992px) { .office-map { min-height: 640px; } }
/* celular: el mapa arriba y la tarjeta debajo, sin taparse */
@media (max-width: 767.98px) {
  .office-map { display: block; padding: 0; min-height: 0; background: #fff; }
  .office-map-canvas { position: relative; height: 340px; }
  .office-map-inner { pointer-events: auto; margin-top: -2.5rem; padding-bottom: 3rem; }
  .office-card { max-width: none; padding: 2rem 1.5rem; }
}
/* el tema del mapa (colores, zoom, globo) es el mismo de la ficha de propiedad */
.office-map .leaflet-bar { border: 0; border-radius: .6rem; overflow: hidden; box-shadow: 0 6px 16px rgba(12, 30, 70, .25); }
.office-map .leaflet-bar a { width: 36px; height: 36px; line-height: 36px; font-size: 1.2rem; background: var(--rx-ink-navy); color: #fff; border-bottom-color: rgba(255, 255, 255, .15); }
.office-map .leaflet-bar a:hover { background: var(--rx-blue); color: #fff; }
.office-map .leaflet-marker-icon { filter: drop-shadow(3px 4px 5px rgba(0, 0, 0, .35)); }
.office-map .leaflet-popup-content-wrapper, .office-map .leaflet-popup-tip { background: var(--rx-ink-navy); color: #fff; }
.office-map .leaflet-popup-content { font-family: var(--font-ui); font-size: .85rem; }
.office-map .leaflet-control-attribution { font-size: .65rem; background: rgba(255, 255, 255, .75); }
.office-map .leaflet-control-zoom { margin-right: 1rem !important; }

/* bloque de agentes: 4 al azar de todo el equipo (sin JS se ven los primeros 4) */
.agent-pool > .agent:nth-child(n + 5) { display: none; }
.agent-pool.is-shuffled > .agent { display: none; }
.agent-pool.is-shuffled > .agent.is-picked { display: block; }

/* ---------- Aviso de cookies: barra inferior amable ---------- */
.consent-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050;
  background: #fff; color: var(--rx-ink);
  border-top: 1px solid var(--rx-line); box-shadow: 0 -10px 30px rgba(12, 30, 70, .1);
  transform: translateY(100%); transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.consent-bar.is-visible { transform: none; }
.consent-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; padding-top: 1rem; padding-bottom: 1rem; }
.consent-text { margin: 0; font-size: .85rem; line-height: 1.5; flex: 1 1 420px; }
.consent-text i { color: var(--rx-blue); font-size: 1.1rem; vertical-align: -.2rem; margin-right: .3rem; }
.consent-text a { color: var(--rx-blue); text-underline-offset: 3px; white-space: nowrap; }
.consent-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.consent-link { border: 0; background: none; padding: .4rem .6rem; font-size: .82rem; color: var(--rx-ink-navy); text-decoration: underline; text-underline-offset: 3px; }
/* "No thanks" y "Accept" con el mismo peso visual: no se esconde el rechazar */
.btn-consent {
  font-family: var(--font-ui); font-size: .85rem; font-weight: 500; border-radius: 2rem; padding: .5rem 1.4rem;
  background: var(--rx-ink-navy); color: #fff; border: 1.5px solid var(--rx-ink-navy);
}
.btn-consent:hover, .btn-consent:focus-visible { background: var(--rx-navy); border-color: var(--rx-navy); color: #fff; }
@media (max-width: 575.98px) {
  .consent-actions { width: 100%; }
  .consent-actions .btn-consent { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) { .consent-bar { transition: none; } }

/* mientras la barra está visible, el footer revelado y el globo suben su altura para no quedar tapados */
.has-reveal-footer .footer-brand { bottom: var(--consent-h, 0px); }
.has-reveal-footer .footer-top { margin-bottom: calc(var(--footer-brand-h, 0px) + var(--consent-h, 0px)); }

.consent-modal { border: 0; border-radius: 1rem; padding: 1.75rem; }
.consent-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.consent-modal-head h2 { font-family: var(--font-head); font-weight: 400; font-size: 1.6rem; color: var(--rx-ink-navy); margin: 0; }
.consent-option { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.1rem 0; border-top: 1px solid var(--rx-line); }
.consent-option h3 { font-family: var(--font-ui); font-size: .95rem; font-weight: 600; color: var(--rx-ink-navy); margin: 0 0 .25rem; }
.consent-option p { font-size: .82rem; line-height: 1.5; color: #4a4f5c; margin: 0; }
.consent-option .form-check-input { width: 2.6em; height: 1.4em; cursor: pointer; }
.consent-option .form-check-input:checked { background-color: var(--rx-blue); border-color: var(--rx-blue); }
.consent-modal-foot { display: flex; justify-content: flex-end; padding-top: 1.25rem; border-top: 1px solid var(--rx-line); }
.footer-cookie-btn { border: 0; background: none; padding: 0; color: #e2e4ea; font-size: inherit; background-image: linear-gradient(currentColor, currentColor); background-position: left bottom; background-size: 0 1px; background-repeat: no-repeat; transition: background-size .35s cubic-bezier(.22, .61, .36, 1); }
.footer-cookie-btn:hover, .footer-cookie-btn:focus-visible { color: #fff; background-size: 100% 1px; }

/* ---------- Menú: "Contact Us" con el estilo de píldora (antes era Sign In) ---------- */
.btn-contact.is-active { background-color: #fff; color: var(--rx-ink-navy); border-color: #fff; }

/* ---------- Footer: acceso discreto para agentes ---------- */
.footer-legal .footer-agent-link { color: #9aa0ad; }

/* ---------- Acceso de agentes (login.html) ---------- */
.auth-body { background: #fff; }
.auth { display: grid; min-height: 100vh; min-height: 100dvh; }
@media (min-width: 992px) { .auth { grid-template-columns: 55% 1fr; } }

/* lado visual: foto con rotador, logo y frase */
.auth-visual { position: relative; overflow: hidden; background: var(--rx-ink-navy); color: #fff; display: none; }
@media (min-width: 992px) { .auth-visual { display: flex; flex-direction: column; justify-content: space-between; padding: 3rem; } }
.auth-slides { position: absolute; inset: 0; isolation: isolate; }   /* las capas de las fotos no se cruzan con el degradado */
.auth-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 20, 48, .55) 0%, rgba(8, 20, 48, .05) 35%, rgba(8, 20, 48, .2) 60%, rgba(8, 20, 48, .8) 100%); }
.auth-visual-logo, .auth-visual-quote, .auth-visual-brand { position: relative; z-index: 1; }
/* nombre del sistema junto al logo: "Costa Workspace" (configurable por oficina en el CMS) */
/* la raya mide lo mismo que el logo (align-items: stretch) y el texto va centrado verticalmente en ella */
.auth-visual-brand { --logo-w: 190px; display: flex; align-items: stretch; gap: 1rem; }
.auth-visual-brand .auth-visual-logo { display: block; width: var(--logo-w); }
/* solo la altura de la palabra RE/MAX, sin el globo: la palabra empieza al 27.8 % del alto del logo (proporción 262.28 × 70.28) */
.auth-visual-brand .auth-workspace { margin-top: calc(var(--logo-w) * 70.28 / 262.28 * .278); }
.auth-workspace { display: flex; align-items: center; font-family: var(--font-ui); font-weight: 500; font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; color: #fff; padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, .45); line-height: 1.3; }
.auth-logo-mobile { display: inline-flex; align-items: center; gap: .6rem; }
.auth-logo-mobile .auth-workspace { font-size: .62rem; padding-left: .6rem; }
.auth-visual-logo { width: 190px; height: auto; }
.auth-visual-quote { font-family: var(--font-head); font-weight: 300; font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.12; letter-spacing: -.02em; margin: 0; max-width: 30rem; text-wrap: balance; }

/* panel del formulario */
.auth-panel { display: flex; flex-direction: column; padding: 1.5rem 1.5rem 2rem; }
@media (min-width: 992px) { .auth-panel { padding: 2.5rem 4rem; } }
.auth-top { display: flex; align-items: center; justify-content: space-between; }
@media (min-width: 992px) { .auth-top { justify-content: flex-end; } }
.auth-logo-mobile { background: var(--rx-ink-navy); border-radius: .6rem; padding: .55rem .8rem; }
.auth-logo-mobile img { height: 30px; width: auto; display: block; }
@media (min-width: 992px) { .auth-logo-mobile { display: none; } }
.auth-back { font-size: .82rem; color: var(--rx-muted); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.auth-back:hover { color: var(--rx-ink-navy); }
.auth-views { flex: 1; display: flex; align-items: center; width: 100%; max-width: 400px; margin: 0 auto; padding: 3rem 0; }
.auth-view { width: 100%; }
.auth-view.is-entering { animation: rx-auth-in .45s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes rx-auth-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .auth-view.is-entering { animation: none; } }

.auth-title { font-family: var(--font-head); font-weight: 400; font-size: clamp(2rem, 3vw, 2.4rem); line-height: 1.1; letter-spacing: -.015em; color: var(--rx-ink-navy); margin-bottom: .6rem; }
.auth-sub { font-size: .92rem; line-height: 1.6; color: #4a4f5c; margin-bottom: 2rem; }
.auth-sub strong { color: var(--rx-ink-navy); font-weight: 600; overflow-wrap: anywhere; }
.auth-form { display: grid; gap: 1rem; }
.auth-form .form-floating > .form-control { border-radius: .6rem; border-color: #cfd6e4; height: 3.4rem; font-size: .95rem; }
.auth-form .form-floating > label { color: var(--rx-muted); font-size: .9rem; }
.auth-form .form-control:focus { border-color: var(--rx-blue); box-shadow: 0 0 0 3px rgba(47, 95, 191, .15); }
.auth-form.was-validated .form-control:valid { border-color: #cfd6e4; background-image: none; }
.auth-pass .form-control { padding-right: 3rem; }
.auth-eye { position: absolute; top: .55rem; right: .5rem; width: 2.3rem; height: 2.3rem; border: 0; border-radius: .5rem; background: none; color: var(--rx-muted); display: grid; place-items: center; font-size: 1.15rem; z-index: 3; }
.auth-eye:hover { color: var(--rx-ink-navy); background: #f1f3f8; }
.auth-caps { margin: -.4rem 0 0; font-size: .78rem; color: #8a5a00; display: flex; align-items: center; gap: .35rem; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .85rem; }
.auth-row .form-check-input:checked { background-color: var(--rx-blue); border-color: var(--rx-blue); }
.auth-link { border: 0; background: none; padding: 0; color: var(--rx-blue); font-size: .85rem; font-weight: 500; text-decoration: none; }
.auth-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-back-link { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: .35rem; }

.btn-auth {
  position: relative; display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  height: 3.2rem; border-radius: 2rem; font-size: .95rem; font-weight: 500;
  background: var(--rx-ink-navy); color: #fff; border: 0; transition: background-color .25s ease, transform .15s ease;
}
.btn-auth:hover, .btn-auth:focus-visible { background: var(--rx-navy); color: #fff; }
.btn-auth:active { transform: scale(.99); }
.btn-auth .spinner-border { display: none; }
.btn-auth.is-loading { pointer-events: none; opacity: .9; }
.btn-auth.is-loading .spinner-border { display: inline-block; }
.btn-auth.is-loading .auth-btn-label { opacity: .8; }

.auth-divider { display: flex; align-items: center; gap: 1rem; color: var(--rx-muted); font-size: .78rem; margin: .25rem 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--rx-line); }
.btn-google { display: flex; align-items: center; justify-content: center; gap: .65rem; width: 100%; height: 3.2rem; border-radius: 2rem; border: 1px solid #cfd6e4; background: #fff; color: var(--rx-ink); font-size: .92rem; font-weight: 500; }
.btn-google:hover, .btn-google:focus-visible { background: #f6f8fb; border-color: #b9c1d1; color: var(--rx-ink); }

.auth-alert { display: flex; gap: .5rem; align-items: flex-start; background: #fdecec; color: #8f1d22; border-radius: .6rem; padding: .8rem 1rem; font-size: .85rem; line-height: 1.45; }
.auth-alert i { font-size: 1.1rem; margin-top: .05rem; }
.auth-note { margin: 1.75rem 0 0; font-size: .82rem; color: var(--rx-muted); text-align: center; }
.auth-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #e8eefb; color: var(--rx-blue); font-size: 2rem; margin-bottom: 1.5rem; }
.auth-icon--ok { background: #e6f4ec; color: #1d7a46; }
.auth-view[data-view="sent"] .btn-auth, .auth-view[data-view="done"] .btn-auth { margin-top: .5rem; }

.auth-rules { list-style: none; padding: 0; margin: -.25rem 0 .25rem; display: grid; gap: .3rem; font-size: .8rem; color: var(--rx-muted); }
.auth-rules li { display: flex; align-items: center; gap: .4rem; transition: color .25s ease; }
.auth-rules li i { font-size: 1rem; color: #c3c9d6; transition: color .25s ease; }
.auth-rules li.is-ok { color: #1d7a46; }
.auth-rules li.is-ok i { color: #1d7a46; }
.auth-legal { text-align: center; font-size: .75rem; color: var(--rx-muted); margin: 0; }
.auth-legal a { color: var(--rx-muted); }
/* "Remember me" no se pinta de verde al validar */
.auth-form.was-validated .form-check-input:valid { border-color: rgba(0, 0, 0, .25); }
.auth-form.was-validated .form-check-input:valid:checked { background-color: var(--rx-blue); border-color: var(--rx-blue); }
.auth-form.was-validated .form-check-input:valid ~ .form-check-label { color: inherit; }
/* celular: la foto se vuelve una franja arriba con el logo (como se acordó) */
@media (max-width: 991.98px) {
  .auth-visual { display: flex; flex-direction: column; justify-content: space-between; height: 190px; padding: 1.25rem 1.5rem; }
  .auth-visual-logo { width: 130px; }
  .auth-visual-brand { --logo-w: 130px; }
  .auth-visual-quote { font-size: 1.25rem; }
  .auth-logo-mobile { display: none; }
  .auth-top { justify-content: flex-end; }
  .auth-views { padding: 1.75rem 0 2.5rem; }
}
/* "Contact Us": fondo blanco translúcido para que destaque sobre fotos y sobre el encabezado oscuro */
.btn-contact:not(.is-active) { background-color: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .55); }
.btn-contact:not(.is-active):hover, .btn-contact:not(.is-active):focus-visible { background-color: #fff; border-color: #fff; color: var(--rx-ink-navy); }


/* =========================================================
   Menú de celular (< 992px): botón cuadrado fijo que se vuelve X
   y capa a pantalla completa con enlaces escalonados (inspirado en Nirú)
   ========================================================= */
.mobile-menu-logo, .mobile-quick { display: none; }
@media (max-width: 991.98px) {
  /* logo un poco más arriba y alineado con el botón */
  .site-header { padding-top: 2.75rem; }
  .site-header .navbar { padding-top: 0; padding-bottom: 0; }
  .site-header--solid { padding-bottom: 2.75rem; }   /* igual que arriba: el logo queda centrado en la franja y alineado con el botón */
  .site-header .navbar-brand { margin-right: 64px; padding: 0; }

  /* ESP y el botón: fijos, en la misma columna */
  .site-header .lang-tab { position: fixed; right: calc(var(--bs-gutter-x, 1.5rem) * .5); width: 48px; text-align: center; padding-left: 0; padding-right: 0; z-index: 1043; }
  .site-header .navbar-toggler {
    position: fixed; top: 42px; right: calc(var(--bs-gutter-x, 1.5rem) * .5); z-index: 1043;
    width: 48px; height: 48px; padding: 0; display: grid; place-items: center;
    background: var(--rx-ink-navy); border: 1px solid rgba(255, 255, 255, .3); border-radius: .5rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  }
  .site-header .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255, 191, 71, .6); }
  .burger { position: relative; width: 22px; height: 16px; display: block; }
  .burger span {
    position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: #fff;
    transition: transform .4s cubic-bezier(.65, 0, .35, 1), opacity .25s ease, top .4s cubic-bezier(.65, 0, .35, 1);
  }
  .burger span:nth-child(1) { top: 0; }
  .burger span:nth-child(2) { top: 7px; }
  .burger span:nth-child(3) { top: 14px; }
  .menu-open .burger span:nth-child(1) { top: 7px; transform: rotate(45deg); }
  .menu-open .burger span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
  .menu-open .burger span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

  /* capa a pantalla completa: baja desde arriba */
  .site-header .navbar-collapse {
    display: flex !important; flex-direction: column; align-items: stretch;
    position: fixed; inset: 0; z-index: 1042; height: 100dvh !important;
    padding: 118px 1.75rem 1.5rem; overflow-y: auto; overscroll-behavior: contain;
    background: linear-gradient(165deg, #1b3470 0%, var(--rx-ink-navy) 55%, #0c1a40 100%);
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path .5s cubic-bezier(.77, 0, .18, 1), visibility 0s linear .5s;
  }
  .menu-open .site-header .navbar-collapse { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .5s cubic-bezier(.77, 0, .18, 1), visibility 0s; }
  .mobile-menu-logo { display: block; position: absolute; top: 2.75rem; left: calc(var(--bs-gutter-x, 1.5rem) * .5); }
  .mobile-menu-logo img { height: 44px; width: auto; }

  /* enlaces grandes que aparecen uno tras otro */
  .site-header .navbar-nav { gap: 0 !important; margin: 0 !important; }
  .site-header .navbar-nav > .nav-item {
    opacity: 0; transform: translateY(18px);
    transition: opacity .35s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
  .menu-open .site-header .navbar-nav > .nav-item { opacity: 1; transform: none; transition-delay: calc(.18s + var(--i, 0) * .06s); }
  .site-header .navbar-nav .nav-link {
    font-family: var(--font-head); font-weight: 400; font-size: 1.55rem; line-height: 1.1;
    padding: .75rem 0; color: #fff; display: flex; align-items: center; justify-content: space-between;
    transition: padding-left .3s ease, color .3s ease;
  }
  .site-header .navbar-nav .nav-link:hover, .site-header .navbar-nav .nav-link:focus-visible { padding-left: .5rem; opacity: 1; }
  .site-header .navbar-nav .nav-link.active { font-weight: 400; }
  .site-header .navbar-nav .nav-link.active::before {
    content: ""; position: static; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--rx-red); margin-right: .75rem; transform: none; order: -1;
  }
  .site-header .navbar-nav .nav-link.active { justify-content: flex-start; }
  .site-header .dropdown-toggle::after { margin-left: auto; border-top-color: rgba(255, 255, 255, .7); transition: transform .3s ease; }
  .site-header .dropdown-toggle.show::after { transform: rotate(180deg); }
  .site-header .navbar-nav .dropdown-menu {
    position: static; background: transparent; border: 0; padding: 0 0 .9rem .25rem; margin: 0; box-shadow: none;
  }
  .site-header .navbar-nav .dropdown-item { color: rgba(255, 255, 255, .78); font-size: 1.05rem; padding: .45rem 0; background: none; }
  .site-header .navbar-nav .dropdown-item:hover, .site-header .navbar-nav .dropdown-item:focus { color: #fff; background: none; }

  /* contacto rápido: destacado por color y posición, sin contorno */
  .mobile-quick {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: auto; padding-top: 2rem;
    opacity: 0; transform: translateY(18px); transition: opacity .35s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
  }
  .menu-open .mobile-quick { opacity: 1; transform: none; transition-delay: .6s; }
  .mq-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
    padding: .9rem .5rem; border-radius: .9rem; color: #fff; text-decoration: none; font-size: .82rem; font-weight: 500;
  }
  .mq-btn i { font-size: 1.45rem; }
  .mq-contact { background: var(--rx-red); }
  .mq-wa { background: var(--rx-wa); }
  .mq-call { background: rgba(255, 255, 255, .12); }
  .mq-btn:active { transform: scale(.97); }

  html.menu-open { overflow: hidden; }

  /* sin el recuadro azul de Bootstrap al tocar (en iPhone el toque cuenta como "foco");
     el marco de foco se deja solo para teclado en pantallas con mouse */
  .site-header .navbar-toggler, .site-header .navbar-nav .nav-link, .site-header .dropdown-item, .mq-btn { -webkit-tap-highlight-color: transparent; }
  .site-header .navbar-toggler:focus, .site-header .navbar-nav .nav-link:focus,
  .site-header .navbar-nav .nav-link:focus-visible, .site-header .dropdown-item:focus-visible, .mq-btn:focus-visible { box-shadow: 0 6px 18px rgba(0, 0, 0, .25); outline: none; }
  .site-header .navbar-nav .nav-link:focus, .site-header .navbar-nav .nav-link:focus-visible,
  .site-header .dropdown-item:focus-visible, .mq-btn:focus-visible { box-shadow: none; }
  .site-header .navbar-nav .nav-link:focus { opacity: 1; }
  /* el botón no lleva marco amarillo (Chrome lo mostraba al hacer clic): con teclado solo se aclara su borde */
  .site-header .navbar-toggler:focus-visible { outline: none; border-color: #fff; }
  @media (hover: hover) {
    .site-header .navbar-nav .nav-link:focus-visible, .site-header .dropdown-item:focus-visible, .mq-btn:focus-visible { outline: 3px solid #ffbf47; outline-offset: 3px; }
  }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .site-header .navbar-collapse { transition: visibility 0s; clip-path: none; opacity: 0; }
  .menu-open .site-header .navbar-collapse { opacity: 1; }
  .site-header .navbar-nav > .nav-item, .mobile-quick { transition: none; transform: none; }
}


/* =========================================================
   Visor de fotos de la propiedad (main.js)
   Fondo negro translúcido (se alcanza a ver la página), sin blur para no pesarle a equipos lentos
   ========================================================= */
html.lb-open { overflow: hidden; }
.lb {
  position: fixed; inset: 0; z-index: 2000; display: grid; grid-template-rows: auto 1fr auto;
  background: rgba(6, 8, 14, calc(.88 * var(--lb-fade, 1))); color: #fff;
  opacity: 0; transition: opacity .3s ease;
}
.lb.is-open { opacity: 1; }
.lb[hidden] { display: none; }
.lb-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: .9rem 1.25rem; transition: opacity .25s ease; }
.lb-title { margin: 0; font-family: var(--font-head); font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-count { margin: 0; font-size: .85rem; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .8); }
.lb-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.lb-icon, .lb-nav {
  display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06);
  color: #fff; border-radius: 50%; transition: background-color .25s ease, border-color .25s ease;
}
.lb-icon { width: 42px; height: 42px; font-size: 1.2rem; }
.lb-icon:hover, .lb-nav:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .45); }
.lb :focus-visible { outline: none; }
@media (hover: hover) { .lb-icon:focus-visible, .lb-nav:focus-visible, .lb-thumb:focus-visible, .lb-tile:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } }

.lb-stage { position: relative; min-height: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 0 1.25rem; touch-action: none; user-select: none; }
.lb-figure {
  margin: 0; height: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem;
  transition: opacity .2s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}
.lb-figure.is-out { opacity: 0; transform: translateX(var(--dx, 0)); }
.lb-figure.is-in { opacity: 0; transform: translateX(var(--dx, 0)); transition: none; }
.lb-img {
  display: block; max-width: 100%; max-height: calc(100% - 2.5rem); min-height: 0; object-fit: contain; border-radius: .35rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45); cursor: zoom-in; transition: transform .35s cubic-bezier(.22, .61, .36, 1);
  -webkit-user-drag: none;
}
.lb.is-zoomed .lb-img { cursor: grab; transition: none; }
.lb.is-zoomed .lb-stage { overflow: hidden; }
.lb-cap { font-size: .85rem; color: rgba(255, 255, 255, .85); text-align: center; margin: 0; }
.lb-nav { width: 52px; height: 52px; font-size: 1.5rem; }

.lb-strip {
  display: flex; gap: .5rem; overflow-x: auto; padding: 1rem 1.25rem 1.25rem; scrollbar-width: none;
  transition: opacity .25s ease;
}
.lb-strip::-webkit-scrollbar { display: none; }
.lb-thumb { flex: 0 0 auto; width: 76px; height: 54px; padding: 0; border: 0; border-radius: .35rem; overflow: hidden; background: #1c2130; opacity: .42; transition: opacity .25s ease, box-shadow .25s ease; }
.lb-thumb img, .lb-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-thumb:hover { opacity: .8; }
/* centradas cuando caben; si son muchas, la tira se desliza desde la primera (margen auto en las orillas) */
.lb-thumb:first-child { margin-left: auto; }
.lb-thumb:last-child { margin-right: auto; }
.lb-thumb.is-active { opacity: 1; box-shadow: 0 0 0 2px #fff; }

/* vista de cuadrícula: todas las fotos */
.lb.is-grid .lb-stage, .lb.is-grid .lb-strip { display: none; }
.lb-grid {
  grid-row: 2 / 4; overflow-y: auto; padding: .5rem 1.25rem 2rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; align-content: start;
}
.lb-grid[hidden] { display: none; }
.lb-tile { position: relative; display: block; width: 100%; height: 0; padding: 75% 0 0; border: 0; border-radius: .4rem; overflow: hidden; background: #1c2130; cursor: pointer; }
/* la foto va absoluta: así su tamaño real no estira la fila y el espacio entre filas es igual al de columnas */
.lb-tile img { position: absolute; inset: 0; }
.lb-tile img { transition: transform .5s cubic-bezier(.22, .61, .36, 1), opacity .3s ease; }
.lb-tile:hover img { transform: scale(1.05); }

/* celular: sin flechas (se desliza), miniaturas más chicas y controles que se ocultan con un toque */
@media (hover: none), (max-width: 767.98px) {
  .lb-nav { display: none; }
  .lb-stage { grid-template-columns: 1fr; padding: 0 .5rem; }
  .lb-top { padding: .75rem 1rem; }
  .lb-title { font-size: .9rem; }
  .lb-thumb { width: 56px; height: 42px; }
  .lb-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; padding: .5rem 1rem 2rem; }
  .lb.ui-hidden .lb-top, .lb.ui-hidden .lb-strip { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lb, .lb-figure, .lb-img, .lb-tile img { transition: none; }
}

/* =========================================================
   Guardar propiedades (favoritos)
   ========================================================= */
/* corazón sobre la foto de la tarjeta (encima del enlace que cubre la tarjeta) */
.ratio > .save-heart {
  top: .75rem; right: .75rem; left: auto; width: 40px; height: 40px; z-index: 3;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--rx-ink-navy); font-size: 1.2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18); transition: transform .25s ease, color .25s ease, background-color .25s ease;
}
/* la foto tiene transform/clip-path y forma su propia capa: el enlace que cubre la tarjeta quedaba encima del corazón.
   La foto sube de capa pero deja pasar los clics (abre la propiedad); solo el corazón los recibe. */
.property-card .property-media { z-index: 2; pointer-events: none; }
.property-card .save-heart { pointer-events: auto; }
.save-heart:hover { transform: scale(1.08); color: var(--rx-red); }
.save-heart.is-saved { color: var(--rx-red); }
.save-heart.is-pop i, .btn-chip.is-pop i { animation: rx-heart-pop .45s cubic-bezier(.22, .61, .36, 1); }
@keyframes rx-heart-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.btn-chip.is-saved { background: var(--rx-ink-navy); color: #fff; }
.btn-chip.is-saved i { color: #ff6b70; }

/* contador: en el corazón del menú, en el botón de celular y en el menú abierto */
/* página de favoritos */
.saved-head { padding: 3.5rem 0 2.5rem; }
.saved-eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rx-red); margin-bottom: .75rem; }
.saved-title { font-family: var(--font-head); font-weight: 400; color: var(--rx-ink-navy); font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 .75rem; }
.saved-sub { color: var(--rx-muted); max-width: 36rem; margin: 0; }
.saved-list { padding: 4rem 0 5rem; }
.saved-empty { text-align: center; max-width: 26rem; margin: 0 auto; padding: 2rem 0; }
.saved-empty-icon { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #fff; color: var(--rx-red); font-size: 2rem; margin-bottom: 1.25rem; box-shadow: 0 8px 24px rgba(21, 42, 92, .08); }
.saved-empty h2 { font-family: var(--font-head); font-weight: 400; color: var(--rx-ink-navy); font-size: 1.6rem; }
.saved-empty p { color: var(--rx-muted); margin-bottom: 1.75rem; }
.saved-send-text { color: var(--rx-muted); margin: 1rem 0 1.5rem; max-width: 26rem; }
.saved-chips { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.saved-chips li { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; border-radius: 2rem; background: var(--rx-soft); color: var(--rx-ink-navy); font-size: .78rem; }
.saved-chips i { color: var(--rx-blue); }
@media (prefers-reduced-motion: reduce) {
  .save-heart.is-pop i, .btn-chip.is-pop i { animation: none; }
  .save-heart, .saved-link { transition: none; }
}

/* tarjeta del agente asignado en la ficha (misma de Agents, con borde porque va sobre fondo blanco) */
.agent-tile--assigned { height: auto; border: 1px solid var(--rx-line); box-shadow: 0 6px 20px rgba(20, 40, 90, .06); }
.agent-tile--assigned:hover { transform: none; }


/* ---------- Extras: ficha en PDF y documentos ---------- */
.extras-intro { max-width: 46rem; }
.brochure-card {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin: 2rem 0 1.5rem; padding: 1.5rem 1.75rem;
  border-radius: .9rem; background: var(--rx-soft); border: 1px solid rgba(21, 42, 92, .06);
}
.brochure-ico { display: grid; place-items: center; width: 56px; height: 56px; flex: 0 0 auto; border-radius: .75rem; background: #fff; color: var(--rx-red); font-size: 1.8rem; box-shadow: 0 4px 14px rgba(21, 42, 92, .08); }
.brochure-text { flex: 1 1 18rem; }
.brochure-text h3 { font-family: var(--font-head); font-weight: 400; color: var(--rx-ink-navy); font-size: 1.3rem; margin: 0 0 .25rem; }
.brochure-text p { margin: 0; color: var(--rx-muted); font-size: .85rem; }
.brochure-card .btn { display: inline-flex; align-items: center; gap: .45rem; }
.doc-group-title { font-family: var(--font-ui); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rx-ink-navy); margin: 0 0 .75rem; }
.doc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.doc-file {
  display: flex; align-items: center; gap: .85rem; padding: .7rem .9rem; border-radius: .6rem; border: 1px solid var(--rx-line);
  background: #fff; color: var(--rx-ink-navy); text-decoration: none; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.doc-file:hover { color: var(--rx-ink-navy); border-color: var(--rx-blue); box-shadow: 0 6px 16px rgba(21, 42, 92, .08); transform: translateY(-1px); }
.doc-ico { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: .5rem; background: #fdecec; color: var(--rx-red); font-size: 1.25rem; }
.doc-ico--jpg { background: #eaf1fb; color: var(--rx-blue); }
.doc-ico--docx { background: #e9eefb; color: #2b4fa8; }
.doc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.doc-name { font-size: .85rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-meta { font-size: .72rem; color: var(--rx-muted); }
.doc-dl { color: var(--rx-blue); font-size: 1.15rem; transition: transform .25s ease; }
.doc-file:hover .doc-dl { transform: translateY(2px); }
.lead-head-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.5rem; flex: 0 0 auto; }
.lead-intro { font-size: .85rem; color: var(--rx-muted); margin: 0 0 1rem; }
.lead-check { font-size: .8rem; color: var(--rx-muted); }
@media (prefers-reduced-motion: reduce) { .doc-file, .doc-dl { transition: none; } .doc-file:hover { transform: none; } }

/* contador estilo Airbnb: círculo rojo encima de la esquina del corazón */
.saved-count {
  display: inline-block; box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--rx-red); color: #fff; font-family: var(--font-ui); font-size: .65rem; font-weight: 600;
  line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.saved-count[hidden] { display: none; }
.saved-link { position: relative; color: #fff; font-size: 1.35rem; line-height: 1; text-decoration: none; opacity: .9; transition: opacity .25s ease, transform .25s ease; }
.saved-link:hover { color: #fff; opacity: 1; transform: scale(1.06); }
.saved-link .saved-count { position: absolute; top: -8px; right: -11px; }
.saved-count--burger { position: absolute; top: -7px; right: -7px; box-shadow: 0 0 0 2px var(--rx-ink-navy); }
.menu-open .saved-count--burger { display: none; }
.saved-menu[hidden] { display: none; }
/* texto alineado a la izquierda como las demás opciones; corazón y número a la derecha */
.saved-menu-link { display: flex; align-items: center; gap: .75rem; }
.saved-menu-end { position: relative; margin-left: auto; margin-right: .6rem; display: inline-block; font-size: 1.15rem; line-height: 1; color: #fff; }
.saved-menu-end .saved-count { position: absolute; top: -8px; right: -11px; }
.site-header .navbar-nav .dropdown-menu .dropdown-divider { border-color: rgba(255, 255, 255, .15); }

/* ---------- Ficha en celular: mapa sin encimar y agente al final ---------- */
@media (max-width: 991.98px) {
  .location-map { min-height: 0; padding: 0; background: none; }
  .location-map-canvas { position: relative; inset: auto; height: 320px; }
  /* la tarjeta del vecindario va pegada debajo del mapa, a todo lo ancho, como parte de él */
  .location-map > .container-xl { pointer-events: auto; max-width: none; padding: 0; }
  .neighborhood-card { max-width: none; margin: 0; border-radius: 0; background: var(--rx-ink-navy); padding: 1.75rem var(--bs-gutter-x, 1.5rem); }
  .summary-media, .location-map + .summary-block .summary-media { margin-top: 2.5rem; }
  .agent-slot-mobile { padding-top: 1rem; padding-bottom: 2.5rem; }
  .agent-slot-mobile .agent-tile--assigned { max-width: 26rem; }
}

/* tablet (576–991): foto y datos lado a lado; tarjeta del agente horizontal */
@media (min-width: 576px) and (max-width: 991.98px) {
  .summary-block { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 0 2rem; align-items: center; }
  .summary-block .summary-media { width: 100%; }
  .summary-block > .row { margin-top: 0 !important; }
  .summary-block > .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  .agent-slot-mobile .agent-tile--assigned { max-width: none; flex-direction: row; }
  .agent-slot-mobile .agent-tile--assigned .agent-tile-photo { flex: 0 0 40%; }
  .agent-slot-mobile .agent-tile--assigned .agent-tile-photo img { height: 100%; aspect-ratio: auto; min-height: 100%; }
  .agent-slot-mobile .agent-tile--assigned .agent-tile-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
}


/* ---------- Teléfono con selector de país (intl-tel-input) ---------- */
.iti { width: 100%; display: block; }
.iti__selected-country { border-radius: inherit; }
.iti__selected-country-primary { padding: 0 6px 0 12px; }
.iti__selected-dial-code { font-size: .9rem; color: var(--rx-ink-navy); }
.iti__dropdown-content { border: 1px solid var(--rx-line); border-radius: .6rem; box-shadow: 0 12px 30px rgba(21, 42, 92, .15); font-family: var(--font-ui); font-size: .85rem; overflow: hidden; }
.iti__search-input { font-family: var(--font-ui); font-size: .85rem; }
.iti__search-input:focus { outline: none; }
.iti__country { padding: .45rem .75rem; }
.iti__country.iti__highlight { background: #eef1f7; }
.iti__dial-code { color: var(--rx-muted); }
.iti--fullscreen-popup .iti__dropdown-content { border-radius: .9rem; }
/* el aviso de error va fuera del contenedor .iti: se muestra cuando el campo es inválido */
.was-validated .iti:has(.form-control:invalid) ~ .invalid-feedback { display: block; }
.was-validated .iti .form-control:invalid { border-color: var(--bs-form-invalid-border-color); }

/* ---------- Ficha: otros agentes disponibles ---------- */
.agent-tile--assigned { transition: opacity .22s ease, transform .22s ease; }
.agent-tile--assigned.is-swapping { opacity: 0; transform: translateY(6px); }
.agent-also { margin-top: 1.25rem; }
.agent-also-title { font-size: .75rem; color: var(--rx-muted); margin-bottom: .6rem; }
.agent-also-list { display: flex; gap: .85rem; flex-wrap: wrap; align-items: flex-start; transition: height .45s cubic-bezier(.22, .61, .36, 1); }
/* fotos nuevas al desplegar "+N": aparecen creciendo, una tras otra */
.agent-also-item.is-new { animation: rx-pop-in .45s cubic-bezier(.34, 1.4, .64, 1) both; animation-delay: calc(var(--d, 0) * 45ms + 80ms); }
@keyframes rx-pop-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.agent-also-item { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 0; border: 0; background: none; font-size: .72rem; color: var(--rx-ink-navy); cursor: pointer; }
.agent-also-item img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--rx-soft); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--rx-line); transition: box-shadow .25s ease, transform .25s ease; }
.agent-also-item:hover img, .agent-also-item:focus-visible img { transform: translateY(-2px); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--rx-blue); }
.agent-also-more { width: 52px; height: 52px; border-radius: 50%; border: 1px dashed var(--rx-line); background: #fff; color: var(--rx-blue); font-weight: 600; font-size: .85rem; cursor: pointer; }
.agent-also-all { display: inline-flex; align-items: center; gap: .3rem; margin-top: .9rem; font-size: .8rem; font-weight: 500; color: var(--rx-blue); text-decoration: none; }
.agent-also-all:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .agent-tile--assigned, .agent-also-item img, .agent-also-list { transition: none; } .agent-also-item.is-new { animation: none; } }


/* ---------- Listado: barra de orden y vista ---------- */
.listing-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.listing-count { margin: 0; font-size: .85rem; color: var(--rx-muted-soft); }
.listing-count strong { color: var(--rx-ink-navy); font-weight: 600; }
.listing-controls { display: flex; align-items: center; gap: .75rem; }
.listing-sort-label { font-size: .8rem; color: var(--rx-muted-soft); white-space: nowrap; }
.listing-sort { width: auto; min-width: 11rem; font-size: .82rem; border-radius: 2rem; border-color: rgba(21, 42, 92, .12); padding-top: .4rem; padding-bottom: .4rem; }
.listing-view { display: inline-flex; background: #fff; border: 1px solid rgba(21, 42, 92, .12); border-radius: 2rem; padding: 3px; }
.listing-view button { width: 36px; height: 32px; border: 0; border-radius: 2rem; background: none; color: var(--rx-muted); font-size: 1.05rem; display: grid; place-items: center; transition: background-color .25s ease, color .25s ease; }
.listing-view button:hover { color: var(--rx-ink-navy); }
.listing-view button.is-active { background: var(--rx-ink-navy); color: #fff; }
.listing-grid.is-changing { opacity: .25; transition: opacity .18s ease; }
.listing-grid { transition: opacity .18s ease; }
.property-excerpt { display: none; }

/* vista de lista: una propiedad por renglón, foto a la izquierda y más información */
.listing-grid.is-list > .listing-item { flex: 0 0 100%; max-width: 100%; }
.listing-grid.is-list .property-card { flex-direction: row; height: auto; }
.listing-grid.is-list .property-media { flex: 0 0 36%; max-width: 36%; --bs-aspect-ratio: 66.6667%; }
.listing-grid.is-list .property-body { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title price" "loc loc" "excerpt excerpt" "feats btn"; column-gap: 1.5rem; align-content: center; padding: 1.5rem 2rem; }
.listing-grid.is-list .property-title { grid-area: title; font-size: 1.15rem; }
.listing-grid.is-list .property-loc { grid-area: loc; }
.listing-grid.is-list .property-excerpt { grid-area: excerpt; display: block; font-size: .85rem; line-height: 1.55; color: #4a5060; margin: 0 0 1rem; max-width: 40rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.listing-grid.is-list .property-price { grid-area: price; border: 0; padding: 0; text-align: right; font-size: 1.4rem; }
.listing-grid.is-list .property-feats { grid-area: feats; margin: 0; padding-top: .9rem; border-top: 1px solid var(--rx-line); }
.listing-grid.is-list .property-btn { grid-area: btn; }
@media (max-width: 767.98px) {
  .listing-bar { gap: .75rem; }
  .listing-sort-label { display: none; }
  .listing-controls { width: 100%; justify-content: space-between; }
  .listing-sort { flex: 1; min-width: 0; }
  /* lista compacta en celular: foto chica y datos a la derecha */
  .listing-grid.is-list .property-media { flex-basis: 38%; max-width: 38%; --bs-aspect-ratio: 100%; }
  .listing-grid.is-list .property-body { display: block; padding: .85rem 1rem; }
  .listing-grid.is-list .property-title { font-size: .95rem; }
  .listing-grid.is-list .property-excerpt, .listing-grid.is-list .property-btn { display: none; }
  .listing-grid.is-list .property-price { text-align: left; font-size: 1.05rem; margin: .2rem 0 .4rem; }
  .listing-grid.is-list .property-feats { border: 0; padding: 0; gap: .75rem; }
  .listing-grid.is-list .ratio > .property-tag { top: .5rem; left: .5rem; font-size: .62rem; padding: .2rem .55rem; }
  .listing-grid.is-list .ratio > .save-heart { width: 32px; height: 32px; top: .5rem; right: .5rem; font-size: 1rem; }
}
/* transición al reordenar o cambiar de vista: solo las tarjetas viajan; la página no hace el fundido de navegación */
html.vt-listing::view-transition-old(root), html.vt-listing::view-transition-new(root) { animation: none; }
html.vt-listing::view-transition-group(*) { animation-duration: .45s; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
@media (prefers-reduced-motion: reduce) { .listing-grid, .listing-grid.is-changing { transition: none; } }

/* ---------- Listado: vista de mapa ---------- */
.listing-layout.is-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.5rem; align-items: start; }
.listing-map { position: sticky; top: 1rem; height: calc(100vh - 2rem); min-height: 480px; border-radius: .9rem; overflow: hidden; box-shadow: 0 10px 30px rgba(21, 42, 92, .12); }
.listing-map[hidden] { display: none; }
.listing-map-canvas { position: absolute; inset: 0; }
/* lista compacta junto al mapa */
.listing-grid.is-maplist { margin: 0; --bs-gutter-y: .9rem; }
.listing-grid.is-maplist > .listing-item { flex: 0 0 100%; max-width: 100%; }
.listing-grid.is-maplist .property-card { flex-direction: row; height: auto; transition: box-shadow .25s ease, transform .25s ease; }
.listing-grid.is-maplist .property-media { flex: 0 0 40%; max-width: 40%; --bs-aspect-ratio: 78%; }
.listing-grid.is-maplist .property-body { padding: 1rem 1.25rem; }
.listing-grid.is-maplist .property-title { font-size: .95rem; }
.listing-grid.is-maplist .property-price { font-size: 1.1rem; padding-bottom: .5rem; }
.listing-grid.is-maplist .property-feats { margin-top: .5rem; gap: .9rem; }
.listing-grid.is-maplist .property-btn { display: none; }
.listing-grid.is-maplist .listing-item.is-hot .property-card { box-shadow: 0 0 0 2px var(--rx-blue), 0 10px 24px rgba(21, 42, 92, .15); }
/* pin con el precio */
.price-pin {
  /* la punta de la colita es el punto exacto en el mapa: el globo sube su alto + la colita (7px) */
  --pin-c: var(--rx-red);
  display: inline-block; transform: translate(-50%, calc(-100% - 7px)); transform-origin: 50% calc(100% + 7px);
  padding: .3rem .6rem; border-radius: 1rem; white-space: nowrap;
  background: #fff; color: var(--rx-ink-navy); font: 700 .75rem/1.2 var(--font-ui); box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
  border: 2px solid var(--pin-c); transition: transform .2s ease, background-color .2s ease, color .2s ease; cursor: pointer;
}
.price-pin--rent { --pin-c: var(--rx-blue); }
/* colita: un cuadrito girado con el mismo fondo y borde, pegado a la base del globo */
.price-pin::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg);
  background: inherit; border-right: 2px solid var(--pin-c); border-bottom: 2px solid var(--pin-c); border-bottom-right-radius: 2px;
  transition: background-color .2s ease;
}
.leaflet-marker-icon.is-hot { z-index: 9999 !important; }
.is-hot .price-pin, .price-pin:hover { background: var(--rx-ink-navy); color: #fff; transform: translate(-50%, calc(-100% - 7px)) scale(1.12); }
/* hoja inferior y botón de conteo: solo existen en celular / tablet */
.map-sheet, .map-count { display: none; }
/* celular / tablet: SOLO el mapa con precios (estilo Airbnb). Tocar un pin sube su tarjeta desde abajo;
   tocar el mapa la cierra. Sin lista ni paginación en esta vista. */
@media (max-width: 991.98px) {
  .listing-layout.is-map { display: block; }
  .listing-grid.is-maplist { display: none; }
  .view-map .blog-pagination { display: none; }
  .listing-map { position: relative; top: auto; z-index: 0; height: 78svh; min-height: 460px; border-radius: .9rem; }
  .map-sheet { display: block; position: absolute; left: .75rem; right: .75rem; bottom: .75rem; z-index: 1000;
    transform: translateY(calc(100% + 1rem)); opacity: 0; pointer-events: none;
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), opacity .25s ease; }
  .map-sheet.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .map-sheet .property-card { border-radius: 1rem; overflow: hidden; box-shadow: 0 14px 40px rgba(0, 0, 0, .28); height: auto; }
  .map-sheet .property-media { --bs-aspect-ratio: 56%; }
  .map-sheet .property-media, .map-sheet .property-media img, .map-sheet .property-body { clip-path: none !important; transform: none !important; opacity: 1 !important; }
  .map-sheet .property-body { padding: .9rem 1.1rem 1rem; }
  .map-sheet .property-excerpt, .map-sheet .property-btn { display: none; }
  .map-sheet .ratio > .save-heart { right: 3.4rem; }
  .map-sheet-close { position: absolute; top: .75rem; right: .75rem; z-index: 4; width: 40px; height: 40px; border-radius: 50%; border: 0;
    display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: var(--rx-ink-navy); font-size: 1.15rem; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
  .map-count { display: inline-flex; align-items: center; gap: .4rem; position: absolute; left: 50%; bottom: 1rem; z-index: 900; transform: translateX(-50%);
    padding: .6rem 1.1rem; border: 0; border-radius: 2rem; background: var(--rx-ink-navy); color: #fff; font-size: .82rem; font-weight: 500;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25); white-space: nowrap; transition: opacity .2s ease; }
  .map-sheet.is-open ~ .map-count { opacity: 0; pointer-events: none; }
  .price-pin { font-size: .7rem; padding: .25rem .55rem; }
}
@media (prefers-reduced-motion: reduce) { .price-pin, .listing-grid.is-maplist .property-card, .map-sheet { transition: none; } }

/* ---------- Zonas táctiles de al menos 44 px (auditoría) ----------
   El botón se ve igual; un área invisible alrededor amplía dónde se puede tocar. */
.listing-view button, .blog-pagination a, .agent-also-more, .lb-thumb { position: relative; }   /* el corazón ya es absoluto */
.ratio > .save-heart { width: 44px; height: 44px; }
.save-heart::after, .listing-view button::after, .blog-pagination a::after { content: ""; position: absolute; inset: -6px; }
.blog-pagination a::after { inset: -7px -4px; }
.price-pin { position: relative; }
.price-pin::before { content: ""; position: absolute; inset: -9px -6px; }

/* etiquetas flotantes: visibles sobre el borde del campo cuando tiene foco o texto */
.float-field { position: relative; }
.float-label { position: absolute; left: .75rem; top: 0; z-index: 3; transform: translateY(-55%); margin: 0; padding: 0 .35rem; border-radius: .25rem;
  background: #fff; color: var(--rx-ink-navy); font-size: .68rem; font-weight: 600; line-height: 1.4; pointer-events: none;
  opacity: 0; transition: opacity .2s ease, transform .2s ease; }
.float-field:has(:is(input, textarea):focus, :is(input, textarea):not(:placeholder-shown)) .float-label { opacity: 1; transform: translateY(-50%); }
@media (prefers-reduced-motion: reduce) { .float-label { transition: none; } }

/* ---------- Rentas: precio por periodo y "Request a quote" ---------- */
.detail-period { font-size: .85rem; font-weight: 500; color: var(--rx-muted); }
.rent-terms { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .5rem 0 0; font-size: .8rem; color: var(--rx-muted); }
.rent-terms span { display: inline-flex; align-items: center; gap: .3rem; }
.rent-terms i { color: var(--rx-blue); font-size: 1rem; }
.quote-lead { color: rgba(255, 255, 255, .88); font-size: .9rem; margin: .25rem 0 1.5rem; max-width: 36rem; }
.quote-form { display: grid; gap: 1rem; }
.quote-label { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .85); margin-bottom: .4rem; }
.quote-date-input { display: flex; align-items: center; gap: .6rem; background: #fff; border-radius: .5rem; padding: 0 .9rem; height: 48px; }
.quote-date-input i { color: var(--rx-blue); font-size: 1.2rem; }
.quote-date-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 .9rem var(--font-ui); color: var(--rx-ink-navy); cursor: pointer; }
.quote-date-input:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); }
.quote-form.was-validated .quote-dates input:invalid ~ * , .quote-form.was-validated .quote-dates:has(input:invalid) .invalid-feedback { display: block; }
.quote-guests { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-end; }
.quote-stepper > div { display: inline-flex; align-items: center; background: #fff; border-radius: .5rem; height: 44px; }
.quote-stepper button { width: 44px; height: 44px; border: 0; background: none; color: var(--rx-ink-navy); font-size: 1.05rem; display: grid; place-items: center; border-radius: .5rem; }
.quote-stepper button:hover { background: var(--rx-soft); }
.quote-stepper output { min-width: 2rem; text-align: center; font-weight: 600; color: var(--rx-ink-navy); font-variant-numeric: tabular-nums; }
.quote-pets { display: inline-flex; align-items: center; gap: .45rem; height: 44px; padding: 0 1rem; border-radius: .5rem; background: rgba(255, 255, 255, .14); color: #fff; font-size: .85rem; font-weight: 500; cursor: pointer; }
.quote-pets input { width: 18px; height: 18px; accent-color: #fff; }
.btn-quote { justify-self: start; display: inline-flex; align-items: center; gap: .5rem; background: var(--rx-ink-navy); color: #fff; padding: .75rem 1.5rem; border-radius: 2rem; font-weight: 600; font-size: .9rem; }
.btn-quote:hover { background: #0e1f47; color: #fff; }
.quote-sent { display: flex; gap: .85rem; align-items: flex-start; background: rgba(255, 255, 255, .14); border-radius: .75rem; padding: 1.25rem 1.4rem; color: #fff; }
.quote-sent > i { font-size: 1.8rem; }
.quote-sent p { margin: .2rem 0 0; color: rgba(255, 255, 255, .9); font-size: .9rem; }
.quote-summary { background: #fff; border-radius: 1rem; padding: 1.25rem; color: var(--rx-ink); box-shadow: 0 18px 40px rgba(10, 30, 80, .25); }
.quote-summary-head { display: flex; gap: .85rem; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid var(--rx-line); }
.quote-summary-head img { width: 72px; height: 56px; border-radius: .5rem; object-fit: cover; }
.quote-summary-head strong { display: block; color: var(--rx-ink-navy); font-weight: 600; }
.quote-summary-head span { font-size: .8rem; color: var(--rx-muted); }
.quote-lines { margin: .5rem 0 0; }
.quote-lines div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid #eef1f6; font-size: .86rem; }
.quote-lines dt { color: var(--rx-muted); font-weight: 500; }
.quote-lines dd { margin: 0; color: var(--rx-ink-navy); font-weight: 600; text-align: right; }
.quote-lines .quote-est { border-bottom: 0; padding-top: .9rem; }
.quote-lines .quote-est dd { font-size: 1.15rem; color: var(--rx-blue); }
.quote-lines .quote-est small { display: block; font-size: .72rem; color: var(--rx-muted); font-weight: 500; }
.quote-note { display: flex; gap: .45rem; margin: .5rem 0 0; font-size: .75rem; color: var(--rx-muted); line-height: 1.5; }
.quote-note i { color: var(--rx-blue); font-size: 1rem; margin-top: .05rem; }
/* calendario (flatpickr) con la marca */
.flatpickr-calendar { font-family: var(--font-ui); border-radius: .9rem; box-shadow: 0 18px 40px rgba(16, 24, 40, .2); border: 0; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover { background: var(--rx-ink-navy); border-color: var(--rx-ink-navy); }
.flatpickr-day.inRange { background: #e6ecf8; border-color: #e6ecf8; box-shadow: -5px 0 0 #e6ecf8, 5px 0 0 #e6ecf8; }
.flatpickr-day.today { border-color: var(--rx-red); }
.flatpickr-months .flatpickr-month, .flatpickr-current-month { color: var(--rx-ink-navy); font-weight: 600; }
span.flatpickr-weekday { color: var(--rx-muted); font-weight: 600; }

/* Anti-spam: campo trampa fuera de la vista (no display:none, que algunos robots detectan) */
.rx-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Cuadros de texto que crecen solos al escribir, sin la esquina para arrastrar (igual que en el panel) */
textarea.form-control { resize: none; field-sizing: content; min-height: 7.5em; max-height: 22em; }

/* Acceso real (Fase 1): aviso de éxito ("Contraseña guardada") */
.auth-alert--ok { background: #e9f7f1; color: #14532d; margin-bottom: 1rem; }

/* ===== Fase 1 · sitio real ===== */
/* Venta y renta a la vez (venían como muestra en propiedad-ambas.html) */
.badge-pair { position: absolute; left: 2.25rem; bottom: -1.1rem; z-index: 2; display: flex; gap: .4rem; }
.badge-pair .badge-sale { position: static; }
.summary-media .badge-pair { left: 1.5rem; }
.detail-price-alt { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .4rem; margin: .45rem 0 0; font-size: .9rem; color: var(--rx-muted); }
.detail-price-alt i { color: var(--rx-blue); font-size: 1.05rem; }
.detail-price-alt strong { color: var(--rx-blue); font-weight: 600; }
.detail-price-alt a { margin-left: .35rem; font-weight: 600; color: var(--rx-ink-navy); text-underline-offset: 3px; }
.ratio > .property-tags { top: 1rem; left: 1rem; width: auto; height: auto; z-index: 2; display: flex; gap: .3rem; }
.property-tags .property-tag { position: static; display: inline-block; padding: .3rem .8rem; border-radius: .9rem .9rem .9rem 0;
  color: #fff; font-size: .7rem; font-weight: 600; letter-spacing: .02em; line-height: 1.3; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
.property-price .property-price-alt { display: block; margin: .15rem 0 0; font-size: .78rem; font-weight: 400; color: var(--rx-muted); text-transform: none; letter-spacing: 0; }
.property-price-alt strong { color: var(--rx-blue); font-weight: 600; }
.intent-switch { background: var(--rx-blue); color: #fff; padding: 2.25rem 0 0; }
.intent-switch p { margin: 0 0 .75rem; font-weight: 600; font-size: .95rem; }
.intent-tabs { display: inline-flex; gap: .5rem; flex-wrap: wrap; }
.intent-tabs button { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .7rem 1.2rem; border: 1px solid rgba(255,255,255,.45); border-radius: 2rem;
  background: transparent; color: #fff; font-weight: 600; font-size: .9rem; }
.intent-tabs button small { font-weight: 500; opacity: .85; font-size: .78rem; }
.intent-tabs button.is-active { background: #fff; color: var(--rx-ink-navy); border-color: #fff; }
.intent-tabs button:not(.is-active):hover { background: rgba(255,255,255,.12); }
.intent-tabs button[data-intent=requestInfo].is-active { background: var(--rx-red); border-color: var(--rx-red); color: #fff; }
.intent-switch + .request-section, .intent-switch ~ .quote-section { padding-top: 2rem !important; }
.intent-switch ~ .request-section { background: var(--rx-blue); }
@media (max-width: 575.98px) {
  .badge-pair { left: 1rem; }
  .badge-pair .badge-sale { font-size: .82rem; padding: .45rem 1rem; }
  .intent-tabs { display: grid; width: 100%; }
  .intent-tabs button { justify-content: flex-start; }
}
/* Vendida / rentada: etiqueta gris oscuro y aviso arriba del título */
.property-tag--sold, .badge-sale.badge-sold { background: var(--rx-ink); }
.detail-closed { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.5rem; padding: .85rem 1.1rem; border-radius: .75rem;
  background: #eef1f6; color: var(--rx-ink-navy); font-size: .9rem; font-weight: 500; }
.detail-closed i { color: var(--rx-blue); font-size: 1.2rem; }
/* Una sola foto: sin miniaturas, a todo lo ancho con un alto razonable */
@media (min-width: 992px) { .gallery-main--single { height: min(72vh, 680px); min-height: 0; } }
/* Listado sin resultados */
.listing-empty i { font-size: 2.5rem; color: var(--rx-blue); display: block; margin-bottom: .75rem; }
.listing-empty p.small { color: var(--rx-muted-soft); max-width: 30rem; margin-inline: auto; }
/* "Previous" igual que "Next" */
.blog-pagination .blog-pagination-prev { margin-right: .75rem; }
.blog-pagination .blog-pagination-prev a {
  display: inline-flex; align-items: center; gap: .4rem; height: 2.4rem; padding: 0 1.15rem; border: 1px solid var(--rx-blue); border-radius: 2rem;
  color: var(--rx-blue); font-size: .9rem; font-weight: 500; background: transparent;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.blog-pagination .blog-pagination-prev a:hover, .blog-pagination .blog-pagination-prev a:focus-visible { background: var(--rx-ink-navy); border-color: var(--rx-ink-navy); color: #fff; }
.blog-pagination li[aria-hidden] { align-self: center; color: var(--rx-muted); padding: 0 .2rem; }
.feature-stat span { display: block; }
/* Agente sin foto todavía: el pin de RE/MAX centrado y chico en lugar del retrato */
.agent-tile-photo img[src$="pin-logo.svg"], .agent-also-item img[src$="pin-logo.svg"] { object-fit: contain; padding: 22%; background: #eef1f6; }
/* Vista previa desde el editor del panel */
.preview-bar { position: sticky; top: 0; z-index: 1100; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem .6rem;
  padding: .55rem 1rem; background: #fff7d6; color: #5c4400; font-size: .85rem; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.preview-bar a { font-weight: 600; color: #5c4400; text-underline-offset: 3px; }
/* Error al enviar un formulario (lo pone rxSend en main.js) */
.rx-form-error { margin: .75rem 0 0; padding: .6rem .9rem; border-radius: .6rem; background: #fdecec; color: #8f1d22; font-size: .85rem; font-weight: 500; }
/* ===== Fase 1 · bloque 6: bloques del artículo (mismo diseño que el editor) ===== */
.article-figure { margin: 2.25rem 0; }
.article-figure img { display: block; width: 100%; height: auto; border-radius: .75rem; background: var(--rx-soft); }
.article-figure figcaption { margin-top: .6rem; font-size: .82rem; color: var(--rx-muted); text-align: center; }
.article-figure--two > div { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.article-figure--two img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 575.98px) { .article-figure--two > div { grid-template-columns: 1fr; } .article-figure--two img { aspect-ratio: 3 / 2; } }
.article-tip { margin: 2rem 0; padding: 1.1rem 1.3rem; border-radius: .9rem; background: #eef4ff; border-left: 4px solid var(--rx-blue); }
.article-tip p { margin: 0; }
.article-tip .article-tip-k { display: flex; align-items: center; gap: .4rem; margin-bottom: .35rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rx-blue-700); }
.article-tip--important { background: #fff4f2; border-left-color: var(--rx-red); }
.article-tip--important .article-tip-k { color: var(--rx-red-700); }
.article-prop { max-width: 26rem; margin: 2.25rem auto; }
.article-prop .property-card { opacity: 1; transform: none; }
.article-video { margin: 2.25rem 0; border-radius: .75rem; overflow: hidden; background: #111; }
.article-cta { margin: 2.25rem 0; text-align: center; }
.article-hr { margin: 2.75rem auto; width: 6rem; border: 0; border-top: 2px solid var(--rx-line); opacity: 1; }
.article-body mark.ae-todo, .article-body .ae-ai-mark { display: none; }
.leaflet-interactive:focus, .leaflet-interactive:focus-visible { outline: 0; }
/* Acceso en celular: "Recordarme" y "¿Olvidaste…?" en un renglón cada uno */
.auth-row { flex-wrap: wrap; }
.auth-row .form-check-label, .auth-link { white-space: nowrap; }

/* Aviso flotante (descargas, guardados): abajo al centro, encima de todo */
.rx-toast { position: fixed; left: 50%; bottom: 1.25rem; z-index: 2100; max-width: min(520px, calc(100vw - 2rem)); width: max-content;
  padding: .85rem 1.15rem; border-radius: 12px; background: #152a5c; color: #fff; font-size: .9rem; font-weight: 500; line-height: 1.4;
  box-shadow: 0 12px 30px rgba(10, 18, 40, .25); transform: translate(-50%, 1rem); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.rx-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .rx-toast { transition: none; } }

/* Celular: "Propiedades guardadas" dentro del menú */
.nav-saved { display: inline-flex; align-items: center; gap: .5rem; }
.nav-saved i { color: var(--rx-red); }
.nav-saved .saved-count { position: static; transform: none; }
/* Celular: ESP y el botón del menú se esconden al bajar y regresan al subir (así no tapan contenido ni botones) */
@media (max-width: 991.98px) {
  .site-header .lang-tab, .site-header .navbar-toggler { transition: transform .3s ease, opacity .3s ease; }
  html.nav-away:not(.menu-open) .site-header .lang-tab, html.nav-away:not(.menu-open) .site-header .navbar-toggler { transform: translateY(-140%); opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .site-header .lang-tab, .site-header .navbar-toggler { transition: none; } }
.site-header .nav-link.nav-saved { display: flex; justify-content: flex-start; gap: .6rem; }
.site-header .nav-link.nav-saved i { position: static; width: auto; margin: 0; font-size: 1.1em; }
.site-header .nav-link.nav-saved .saved-count { margin-left: auto; }
/* Celular: con el menú abierto, el menú va encima del aviso de cookies (no tapa Contacto / WhatsApp / Llamar) */
@media (max-width: 991.98px) {
  .menu-open .site-header .navbar-collapse { z-index: 1060; }
  .menu-open .site-header .navbar-toggler, .menu-open .site-header .lang-tab { z-index: 1061; }
}
@media (max-width: 991.98px) { .menu-open .site-header { z-index: 1060; } }
.property-price .price-request { font-size: .92em; }

/* ---- Celular: campos de 16 px (el iPhone ya no acerca la página al tocar un campo) y botones al tamaño del pulgar ---- */
@media (max-width: 767.98px) {
  input:not([type=checkbox]):not([type=radio]), select, textarea, .form-control, .form-select { font-size: 16px !important; }
  .quote-form .form-control, .quote-form .form-select, .quote-date-input input { min-height: 44px; }
  .btn-chip { min-height: 40px; padding: .5rem 1rem; font-size: .8rem; display: inline-flex; align-items: center; gap: .3rem; }
  .modal .btn-close, .agent-mail .btn-close, [data-bs-dismiss="modal"].btn-close { width: 44px; height: 44px; padding: 0; background-size: 14px; }
  .form-check-input { width: 1.25rem; height: 1.25rem; }
  .faq-filter .btn { padding: .55rem 1rem; font-size: .8rem; }
  .footer-links a { display: inline-block; padding: .3rem 0; line-height: 1.5; }
  .iti__selected-country { min-height: 44px; }
}
@media (max-width: 767.98px) { .modal .btn-close { flex: 0 0 44px; min-width: 44px; } }
.agent-mail-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.quote-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Ficha en celular: nombre, precio y botón principal justo debajo de la foto principal (sin encimarse) ---- */
@media (max-width: 991.98px) {
  .detail-head { padding-top: 1.25rem !important; padding-bottom: .5rem; }
  .detail-head .detail-title { font-size: 1.7rem; margin-bottom: .2rem; }
  .detail-head .detail-price { margin-bottom: .25rem; }
  .detail-head-side .detail-actions { display: none !important; }   /* en celular ya están en el botón grande y los redondos */
  .detail-head-side .detail-meta { margin-top: .75rem !important; }
  .detail-mcta { display: flex; gap: .5rem; margin-top: 1rem; }
  .detail-mcta-main { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 48px; border-radius: 2rem;
    background: var(--rx-red); color: #fff; font-weight: 600; font-size: .95rem; border: 0; }
  .detail-mcta-main:hover, .detail-mcta-main:focus-visible { background: #c81f16; color: #fff; }
  .detail-mcta-icon { width: 48px; height: 48px; flex: 0 0 48px; padding: 0; border-radius: 50%; display: grid; place-items: center;
    background: #eef2fb; color: var(--rx-ink-navy); border: 0; font-size: 1.2rem; }
  .detail-mcta-icon.is-saved i { color: var(--rx-red); }
  .gallery-main + .badge-pair ~ .gallery-count, .gallery-count { bottom: .75rem; }
}
/* Campos opcionales vacíos: sin palomita verde al validar (parecía que ya estaban "bien") */
.was-validated .form-control:valid:placeholder-shown, .was-validated .form-select:valid:not(:required) { border-color: var(--bs-border-color, #dee2e6); background-image: none; padding-right: .75rem; }
/* Celular: guardar y compartir sobre la foto principal, arriba a la derecha */
.photo-tools { position: absolute; top: .75rem; right: .75rem; z-index: 3; display: flex; gap: .5rem; }
.photo-tool { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; border: 0;
  background: rgba(255, 255, 255, .92); color: var(--rx-ink-navy); font-size: 1.2rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.photo-tool:hover, .photo-tool:focus-visible { background: #fff; color: var(--rx-ink-navy); }
.photo-tool.is-saved i { color: var(--rx-red); }
/* Celular: interruptor Buy / Rent a todo lo ancho del buscador */
@media (max-width: 767.98px) { .toggle-op { display: grid; width: 100%; } .toggle-op .btn { padding-top: .65rem; padding-bottom: .65rem; } }
/* Celular y tableta: la tarjeta del director ocupa el ancho de la cuadrícula de agentes y su foto queda alineada con la columna derecha */
@media (max-width: 991.98px) {
  .director-card { max-width: none; }
  .director-photo { right: 0; width: calc(50% - .5rem); }
}
/* Preguntas frecuentes: el globo decorativo va detrás del contenido; en celular, chico y en la esquina para no tapar el título */
.faq-section > * { position: relative; z-index: 1; }
@media (max-width: 767.98px) { .faq-section::before { width: 52px; height: 52px; top: 1.25rem; right: 1.5rem; } }
/* Nosotros, oficina en celular: Cómo llegar y WhatsApp a todo lo ancho, uno debajo del otro */
@media (max-width: 767.98px) { .office-actions { display: flex; flex-direction: column; gap: .6rem; } .office-actions .btn { width: 100%; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; } }
/* Darse de baja de las novedades */
.unsub-card { max-width: 520px; margin: 0 auto; text-align: center; background: #fff; border-radius: 1.1rem; padding: 2.5rem 1.75rem; box-shadow: 0 10px 30px rgba(20, 40, 90, .08); }
.unsub-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #eef2fb; color: var(--rx-blue); font-size: 1.9rem; margin-bottom: 1rem; }
.unsub-title { font-family: var(--font-head); font-weight: 400; color: var(--rx-ink-navy); font-size: 1.9rem; margin-bottom: 1rem; }
.unsub-card p { color: var(--rx-ink-navy); margin-bottom: 1.25rem; }
.unsub-card .unsub-note { font-size: .9rem; color: #5a6070; }
/* Celular: filtros de categorías (blog y FAQs) en un renglón que se desliza de lado; sin partir «Client Stories» en dos líneas */
@media (max-width: 767.98px) {
  .faq-filter { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .faq-filter::-webkit-scrollbar { display: none; }
  .faq-filter .btn { flex: 0 0 auto; white-space: nowrap; }
}
/* Celular: botones del artículo (blog) — «Leer» a todo lo ancho; Compartir y Me gusta debajo, mitad y mitad, misma altura */
@media (max-width: 767.98px) {
  .post-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .post-actions > .btn-arrow { grid-column: 1 / -1; justify-content: center; min-height: 48px; display: inline-flex; align-items: center; gap: .4rem; }
  .post-actions > .btn-chip { justify-content: center; min-height: 44px; border-radius: 2rem; }
}
/* Textos con una palabra larguísima (sin espacios) no se salen de su columna */
.detail-copy, .detail-copy p, .faq-a, .post-body, .agent-bio { overflow-wrap: anywhere; }