/* ==========================================================================
   FB Inmobiliaria — Sistema de diseño
   Tipografía: Noto Serif Display (títulos) + Inter (texto) + JetBrains Mono (datos/ficha)
   Color de marca: vino #6d1b1e — RGB 109/27/30, tal cual el manual de marca
   de Flavio (20/09/2026). El código CMYK del manual es 50/100/100/30, que
   convertido "de manual" da un rojo más oscuro (#590000, el que se usaba
   acá antes); RGB es el que manda en pantalla, CMYK es para imprenta — no
   convierten exacto entre sí y no hay que forzarlos a coincidir.
   Concepto: estética de "ficha catastral" — fichas de archivo, sellos y
   tablas de datos con líneas de puntos, como un registro inmobiliario.
   ========================================================================== */

:root {
  --wine: #6d1b1e;
  --wine-dark: #4b1315;
  --wine-soft: #ae2b30;
  --ivory: #f6f1e8;
  --paper: #fdfbf7;
  --charcoal: #241d1a;
  --stone: #7c6f61;
  --stone-light: #a89c8c;
  --gold: #a67c3d;
  --line: #e2d8c7;
  --line-strong: #cbbda3;
  --success: #3c5e3c;

  --font-display: "Noto Serif Display", serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --container: 1180px;
  --radius: 2px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  color: var(--wine-dark);
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- Skip link / accesibilidad ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--wine);
  color: var(--paper);
  padding: 10px 16px;
  z-index: 999;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo-mark {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1.5px solid var(--wine);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--wine);
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}
.logo-mark::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: 0.55;
}
/* Cuando hay imagen de logo: cuadrado (respeta logos cuadrados) y flexible */
.logo-mark.has-image {
  border-radius: var(--radius);
  border-color: var(--line-strong);
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.logo-text .name {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--charcoal);
}
.logo-text .tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 3px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.main-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal);
  position: relative;
  padding: 6px 0;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--wine);
  transition: width 0.2s ease;
}
.main-nav a:hover::after,
.main-nav a.active::after {
  width: 100%;
}
.main-nav a.active {
  color: var(--wine);
}

.nav-cta {
  border: 1px solid var(--wine);
  color: var(--wine) !important;
  padding: 9px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav-cta:hover {
  background: var(--wine);
  color: var(--paper) !important;
}
.nav-cta::after { display: none; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--charcoal);
  position: relative;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--charcoal);
  color: var(--stone-light);
  margin-top: 96px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 64px 0 40px;
}
.footer-grid h4 {
  color: var(--paper);
  font-size: 15px;
  margin-bottom: 16px;
}
.footer-brand .name {
  font-family: var(--font-display);
  color: var(--paper);
  font-size: 22px;
}
.footer-brand p {
  font-size: 14px;
  max-width: 32ch;
  margin-top: 12px;
  color: var(--stone-light);
}
.footer-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}
.footer-grid a:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 20px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--stone-light);
  display: flex;
  justify-content: space-between;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--wine);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  background: transparent;
}
.btn-primary {
  background: var(--wine);
  color: var(--paper);
}
.btn-primary:hover {
  background: var(--wine-dark);
}
.btn-outline {
  color: var(--wine);
}
.btn-outline:hover {
  background: var(--wine);
  color: var(--paper);
}
.btn-ghost {
  border-color: var(--line-strong);
  color: var(--charcoal);
}
.btn-ghost:hover {
  border-color: var(--wine);
  color: var(--wine);
}

/* ---------- Hero (Inicio) ---------- */
.hero {
  position: relative;
  /* Bajado de 88px a 56px: la portada era tan alta que los tres accesos
     principales quedaban abajo del todo y nadie los veía. */
  padding: 56px 0 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(89,0,0,0.04), rgba(89,0,0,0) 40%),
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(89,0,0,0.05) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(89,0,0,0.05) 40px);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 48px;
  padding-bottom: 34px;
}
.hero .eyebrow { margin-bottom: 18px; }
.hero h1 {
  font-size: clamp(38px, 4.6vw, 58px);
  line-height: 1.06;
}
.hero h1 em {
  font-style: italic;
  color: var(--wine);
}
.hero p.lede {
  font-size: 17px;
  color: var(--stone);
  max-width: 46ch;
  margin: 22px 0 32px;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-figure {
  position: relative;
  /* Era 4/5 (muy alta) y empujaba los tres accesos principales fuera de la
     primera pantalla. Con 4/3.4 la foto sigue siendo grande, ocupa todo el
     ancho de su columna, y los accesos ya se ven sin scrollear. */
  aspect-ratio: 4/3.4;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  /* Mientras la foto todavía no cargó (ver index.html), se ve este color
     parejo en vez de un hueco en blanco o la foto de ejemplo. */
  background: var(--ivory);
}
.hero-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ---------- Buscador rápido ---------- */
.quick-search {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 16px;
  align-items: end;
  margin-top: -34px;
  position: relative;
  z-index: 5;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
}
.field select,
.field input {
  border: none;
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
  padding: 8px 2px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--charcoal);
}
.field select:focus,
.field input:focus {
  border-bottom-color: var(--wine);
  outline: none;
}

/* ---------- Secciones genéricas ---------- */
.section {
  padding: 88px 0;
}
.section-tight { padding: 56px 0; }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 44px;
  gap: 24px;
}
.section-head h2,
.section-head h1 {
  font-size: clamp(28px, 3vw, 38px);
  margin-top: 10px;
}
.section-head p {
  color: var(--stone);
  max-width: 42ch;
  margin-top: 10px;
}
.section-alt { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---------- Categorías (Inicio) ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.cat-card {
  background: var(--paper);
  padding: 34px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background 0.2s ease;
}
.cat-card:hover {
  background: var(--ivory);
}
.cat-index {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gold);
}
.cat-card h3 {
  font-size: 20px;
}
.cat-card p {
  color: var(--stone);
  font-size: 13.5px;
  margin: 0;
}
.cat-card .go {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--wine);
  letter-spacing: 0.04em;
}

/* ---------- Grilla de propiedades ---------- */
.property-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.property-card {
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.property-card:hover {
  border-color: var(--wine-soft);
  transform: translateY(-3px);
}
.property-media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.property-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 06/09/2026: cartel para una ficha sin fotos cargadas todavía, en vez de
   una foto de stock que se podía confundir con la foto real. */
.property-media-sinfoto {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--line);
  color: var(--stone);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 0 16px;
}
.property-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--wine);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
}
/* 21/09/2026: segunda etiqueta chica, debajo de la de categoría, solo para
   Venta con opción de permuta / Alquiler temporario (ver propertyCardHTML
   en storage.js). No aparece en las fichas de Venta/Alquiler comunes. */
.property-tag-op {
  position: absolute;
  top: 44px;
  left: 14px;
  background: var(--paper);
  color: var(--wine);
  border: 1px solid var(--wine);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
}
.property-code {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(253,251,247,0.92);
  color: var(--stone);
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 5px 9px;
  border: 1px solid var(--line);
}
.property-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.property-price {
  font-family: var(--font-mono);
  font-size: 19px;
  color: var(--wine-dark);
  font-weight: 700;
}
.property-title {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--charcoal);
  font-weight: 600;
}
.property-loc {
  font-size: 13px;
  color: var(--stone);
}
.property-specs {
  display: flex;
  gap: 16px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-strong);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--stone);
}

/* ---------- Filtros de categoría (Propiedades) ---------- */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 24px;
}
.filter-chip {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 1px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
  color: var(--stone);
}
.filter-chip:hover {
  border-color: var(--wine);
  color: var(--wine);
}
.filter-chip.active {
  background: var(--wine);
  border-color: var(--wine);
  color: var(--paper);
}
.filter-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--stone);
}

.empty-state {
  padding: 70px 20px;
  text-align: center;
  color: var(--stone);
  font-family: var(--font-mono);
  font-size: 13px;
  border: 1px dashed var(--line-strong);
}

/* ---------- Ficha de propiedad (detalle) ---------- */
.ficha-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.ficha-head .eyebrow { margin-bottom: 10px; }
.ficha-head h1 {
  font-size: clamp(28px, 3.4vw, 40px);
}
.ficha-price {
  font-family: var(--font-mono);
  font-size: 30px;
  color: var(--wine-dark);
  font-weight: 700;
  white-space: nowrap;
}

.ficha-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
  margin-bottom: 48px;
  border: 1px solid var(--line);
  padding: 10px;
  background: var(--paper);
}
.ficha-gallery .main-photo {
  aspect-ratio: 4/3;
  overflow: hidden;
}
.ficha-gallery .side-photos {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}
.ficha-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ficha-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
}
.ficha-desc h2 {
  font-size: 22px;
  margin-bottom: 16px;
}
.ficha-desc p {
  color: var(--charcoal);
  margin-bottom: 16px;
}
.ficha-desc h3 {
  font-size: 16px;
  margin: 32px 0 16px;
}
.amenities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.amenities li {
  font-size: 14px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line-strong);
  display: flex;
  justify-content: space-between;
  color: var(--stone);
}
.amenities li span:last-child {
  color: var(--charcoal);
  font-family: var(--font-mono);
  font-size: 12.5px;
}

/* Ledger — tabla de datos catastrales con líneas de puntos */
.ledger {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 26px;
}
.ledger h3 {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.ledger-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13.5px;
  padding: 9px 0;
}
.ledger-row .k {
  color: var(--stone);
  white-space: nowrap;
}
.ledger-row .dots {
  flex: 1;
  border-bottom: 1px dotted var(--line-strong);
  transform: translateY(-4px);
}
.ledger-row .v {
  font-family: var(--font-mono);
  white-space: nowrap;
  color: var(--charcoal);
}

.agent-card {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 22px;
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 24px;
}
.agent-card img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
  border: 1.5px solid var(--wine);
}
.agent-card .name {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--charcoal);
}
.agent-card .role {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--stone);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

.contact-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}
.contact-actions .btn { justify-content: center; width: 100%; }

/* ---------- Equipo ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.team-card {
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
}
.team-photo {
  aspect-ratio: 3/4;
  overflow: hidden;
  filter: grayscale(15%);
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 06/09/2026: si a un integrante todavía no se le cargó foto, un círculo
   con su inicial en vez del ícono de imagen rota del navegador. */
.team-photo-inicial {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wine);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 42px;
}
.team-body {
  padding: 20px;
}
.team-body .name {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--charcoal);
}
.team-body .role {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.team-body .bio {
  font-size: 13.5px;
  color: var(--stone);
  margin-top: 12px;
}
.team-contact {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--wine-dark);
}

/* ---------- Contacto ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
.form-group {
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-group label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
}
.form-group input,
.form-group select,
.form-group textarea {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--charcoal);
  resize: vertical;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--wine);
  /* 06/09/2026: antes se sacaba el "outline" del navegador y solo quedaba
     el cambio de color de borde (1px) — muy débil para alguien que navega
     con teclado o ve poco. Se repone un contorno bien visible. */
  outline: 2px solid var(--wine);
  outline-offset: 1px;
}
.form-note {
  font-size: 12px;
  /* 06/09/2026: --stone-light sobre el fondo del formulario daba ~2.6:1 de
     contraste (el mínimo recomendado es 4.5:1) — y es justo el texto que
     avisa que la consulta queda registrada, no un detalle cualquiera. */
  color: var(--stone);
  margin-top: 4px;
}
.form-success {
  display: none;
  background: rgba(60,94,60,0.08);
  border: 1px solid var(--success);
  color: var(--success);
  padding: 16px 18px;
  font-size: 14px;
  margin-bottom: 22px;
}
.form-success.show { display: block; }
/* 27/09/2026: campo trampa contra robots (invisible para las personas). */
.campo-trampa { position: absolute !important; left: -10000px !important; top: auto !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important; }
/* Auditoría 27/09/2026: aviso cuando un formulario no se pudo enviar. */
.form-error {
  background: rgba(174,43,48,0.07);
  border: 1px solid #ae2b30;
  color: #8a1f23;
  padding: 14px 16px;
  font-size: 14px;
  margin: 0 0 16px;
}

.office-info {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 30px;
}
.office-info h3 {
  font-size: 18px;
  margin-bottom: 18px;
}
.office-row {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--line-strong);
  font-size: 14px;
}
.office-row:last-child { border-bottom: none; }
.office-row .label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
  width: 90px;
  flex-shrink: 0;
}
.map-block {
  margin-top: 22px;
  aspect-ratio: 16/9;
  overflow: hidden;
  border: 1px solid var(--line);
}
.map-block img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- CTA final ---------- */
.cta-band {
  background: var(--wine);
  color: var(--paper);
  padding: 72px 0;
  text-align: center;
}
.cta-band h2 {
  color: var(--paper);
  font-size: clamp(26px, 3vw, 36px);
}
.cta-band p {
  color: rgba(253,251,247,0.8);
  margin: 14px 0 30px;
}
.cta-band .btn-outline {
  border-color: var(--paper);
  color: var(--paper);
}
.cta-band .btn-outline:hover {
  background: var(--paper);
  color: var(--wine);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--stone);
  padding: 24px 0 0;
}
.breadcrumb a:hover { color: var(--wine); }
.breadcrumb .sep { margin: 0 8px; color: var(--line-strong); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
  /* En el celular la foto de portada se apaisa: así los tres accesos
     principales quedan casi a la vista sin tener que scrollear tanto. */
  .hero-figure { aspect-ratio: 16/9; }
  .quick-search { grid-template-columns: 1fr 1fr; margin-top: 24px; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .property-grid { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .ficha-grid { grid-template-columns: 1fr; }
  .ficha-gallery { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

/* Menú de arriba (06/10/2026): hasta 1080 px de ancho (celular, tablet, notebook
   chica o ventana achicada) se usa el botón de las tres rayitas, porque los 7
   enlaces no entran en una sola línea y se pasaban del borde de la pantalla. */
@media (max-width: 1080px) {
  .main-nav { position: fixed; top: 88px; left: 0; right: 0; bottom: 0; background: var(--ivory); flex-direction: column; align-items: flex-start; padding: 32px; gap: 22px; display: none; overflow-y: auto; }
  .main-nav.open { display: flex; }
  .nav-toggle { display: flex; }
}
/* Entre 1081 y 1199 px: enlaces un poco más juntos para que entren holgados. */
@media (min-width: 1081px) and (max-width: 1199px) {
  .main-nav { gap: 26px; }
}

@media (max-width: 700px) {
  .property-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .quick-search { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
  .ficha-head { flex-direction: column; }
}

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

/* ==========================================================================
   Estado de la propiedad (disponible / reservado / vendido / alquilado)
   ========================================================================== */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 7px 13px;
  border: 1px solid currentColor;
}
.status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.status-pill.tone-ok { color: var(--success); }
.status-pill.tone-warn { color: var(--gold); }
.status-pill.tone-closed { color: var(--wine); }

.property-media.is-unavailable img {
  filter: grayscale(35%) brightness(0.82);
}
.property-status-stamp {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.property-status-stamp span {
  border: 2px solid currentColor;
  background: rgba(253,251,247,0.88);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 18px;
  transform: rotate(-8deg);
}
.property-status-stamp.tone-warn span { color: var(--gold); }
.property-status-stamp.tone-closed span { color: var(--wine); }

/* ==========================================================================
   Selector de fotos locales (panel interno)
   ========================================================================== */

.photo-uploader {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.photo-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.photo-thumb {
  position: relative;
  width: 96px;
  height: 96px;
  border: 1px solid var(--line-strong);
  overflow: hidden;
  background: var(--ivory);
}
.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-thumb .cover-flag {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(89,0,0,0.85);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 9px;
  text-align: center;
  padding: 3px 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.photo-thumb button {
  position: absolute;
  top: 3px;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  line-height: 1;
}
.photo-thumb .remove-photo {
  right: 3px;
  width: 20px;
  height: 20px;
  background: rgba(36,29,26,0.75);
  color: var(--paper);
  font-size: 13px;
}
.photo-thumb .make-cover {
  left: 3px;
  width: 20px;
  height: 20px;
  background: rgba(253,251,247,0.9);
  color: var(--wine);
  font-size: 11px;
}
.photo-thumb .remove-photo:hover { background: var(--wine); }
.photo-thumb .make-cover:hover { background: var(--paper); }

/* 14/09/2026, segunda vuelta — Flavio probó las flechitas de reordenar con
   una ficha de 45 fotos y le resultó tedioso (mover una del final al
   principio pedía muchos clics seguidos). Se reemplazaron por arrastrar y
   soltar: se toma la miniatura y se suelta donde se la quiera, sin importar
   cuántas posiciones tenga que recorrer. `dragging` marca la que se está
   moviendo (semitransparente); `drag-over` marca dónde caería si se soltara
   ahí (borde punteado), para que quede claro antes de soltar. */
.photo-thumb[draggable="true"] { cursor: grab; }
.photo-thumb.dragging { opacity: 0.35; }
.photo-thumb.drag-over { outline: 3px dashed var(--wine); outline-offset: -3px; }

.photo-empty-hint {
  font-size: 12.5px;
  color: var(--stone-light);
  font-style: italic;
}

details.photo-url-fallback {
  margin-top: 14px;
  font-size: 13px;
}
details.photo-url-fallback summary {
  cursor: pointer;
  color: var(--wine-dark);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==========================================================================
   Panel interno (admin)
   ========================================================================== */

.admin-header {
  background: var(--paper);
  border-bottom: 2px solid var(--wine);
}
.admin-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}
.admin-header .logo-text .name { color: var(--wine-dark); }
.admin-header .logo-text .tag { color: var(--gold); }
.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.admin-header-actions a {
  color: var(--charcoal);
  font-size: 13.5px;
}
.admin-header-actions a:hover { color: var(--wine); }
.admin-header-actions .btn-logout {
  border: 1px solid var(--wine);
  color: var(--wine);
  padding: 9px 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: none;
  cursor: pointer;
}
.admin-header-actions .btn-logout:hover { background: var(--wine); color: var(--paper); }

.admin-notice {
  background: rgba(89,0,0,0.06);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--stone);
  padding: 10px 0;
}
.admin-notice .container { display: flex; gap: 8px; align-items: baseline; }
.admin-notice strong { color: var(--wine-dark); }

/* Login */
.login-shell {
  min-height: calc(100vh - 76px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 40px 36px;
}
.login-card .logo-mark { margin: 0 auto 20px; }
.login-card h1 {
  font-size: 24px;
  text-align: center;
}
.login-card p.lede-sm {
  text-align: center;
  color: var(--stone);
  font-size: 13.5px;
  margin: 10px 0 28px;
}
.login-error {
  display: none;
  background: rgba(89,0,0,0.08);
  border: 1px solid var(--wine);
  color: var(--wine-dark);
  font-size: 13px;
  padding: 10px 14px;
  margin-bottom: 18px;
}
.login-error.show { display: block; }
.login-card .btn { width: 100%; justify-content: center; margin-top: 6px; }

/* Dashboard */
.admin-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.admin-card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.admin-card .cat-index { font-family: var(--font-mono); font-size: 12px; color: var(--gold); }
.admin-card h3 { font-size: 22px; }
.admin-card p { color: var(--stone); font-size: 14px; margin: 0; }
.admin-card .btn { align-self: flex-start; margin-top: 8px; }

/* Toolbar + tabla de gestión */
.admin-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.admin-table-wrap {
  border: 1px solid var(--line);
  background: var(--paper);
  overflow-x: auto;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.admin-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.admin-table td {
  padding: 14px 16px;
  border-bottom: 1px dashed var(--line);
  vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table .cell-title { font-weight: 600; color: var(--charcoal); }
.admin-table .cell-sub { color: var(--stone); font-size: 12px; margin-top: 2px; }
.admin-table .cell-mono { font-family: var(--font-mono); font-size: 12px; color: var(--stone); }

/* 14/09/2026 — tabla de admin-publicidad-redes.html: dos filas de encabezado
   (Perfil / Historia, cada una con sus 5 columnas), columnas de "ordenar" y
   la casilla "Hoy" para marcar qué publicar. */
.admin-table-redes th.th-grupo {
  text-align: center;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.admin-table-redes th.th-check { text-align: center; }
.admin-table-redes td.celda-check { text-align: center; border-left: 1px solid var(--line); }
.admin-table-redes th.th-ordenable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.admin-table-redes th.th-ordenable:hover { color: var(--charcoal); }
.admin-table-redes th.th-ordenable.activo { color: var(--wine); }
.admin-table-redes th .flecha-orden { font-size: 10px; }
.admin-table-redes td.celda-check input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 9px;
  border: 1px solid var(--wine);
  color: var(--wine-dark);
}
/* Cada fila tiene varios botones (editar, ver, copiar, eliminar...). Se
   acomodan solos en más de un renglón SIEMPRE, no solo en pantallas chicas:
   antes, con la ventana a medio ancho, el último quedaba fuera de la pantalla
   y no se podía tocar. */
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.row-actions button,
.row-actions .row-link-btn {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 6px 9px;
  border: 1px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
  color: var(--charcoal);
  text-decoration: none;
  display: inline-block;
  line-height: 1.2;
}
.row-actions button:hover,
.row-actions .row-link-btn:hover { border-color: var(--wine); color: var(--wine); }
.row-actions button.danger:hover { border-color: var(--wine); background: var(--wine); color: var(--paper); }
/* "Ver todos los datos" es el botón que más se usa cuando el agente está al
   teléfono: se destaca para encontrarlo sin leer. */
.row-actions button.destacada {
  border-color: var(--charcoal);
  background: var(--charcoal);
  color: var(--paper);
}
.row-actions button.destacada:hover { background: var(--wine); border-color: var(--wine); color: var(--paper); }
/* En el celular se tocan con el dedo, no con el mouse: ahí crecen un poco
   para que no haya que apuntar. */
@media (max-width: 700px) {
  .row-actions { gap: 8px; }
  .row-actions button,
  .row-actions .row-link-btn { font-size: 11.5px; padding: 9px 12px; }
}

.admin-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--stone);
  font-family: var(--font-mono);
  font-size: 13px;
}

/* Formulario de alta/edición (panel deslizable tipo ficha) */
.admin-form-panel {
  display: none;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 32px;
  margin-bottom: 32px;
}
.admin-form-panel.open { display: block; }
.admin-form-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--line-strong);
}
.admin-form-head h3 { font-size: 19px; }
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}
.form-grid-2 .form-group.span-2 { grid-column: 1 / -1; }
.field-hint {
  font-size: 11.5px;
  color: var(--stone-light);
  margin-top: -2px;
}
.admin-form-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px dashed var(--line-strong);
}

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--charcoal);
  color: var(--paper);
  padding: 14px 20px;
  font-size: 13.5px;
  border-left: 3px solid var(--gold);
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  z-index: 300;
  max-width: 320px;
}
.toast.show { transform: translateY(0); opacity: 1; }

@media (max-width: 700px) {
  .admin-cards { grid-template-columns: 1fr; }
  .form-grid-2 { grid-template-columns: 1fr; }
}

/* ---------- Login: nota de niveles ---------- */
.login-levels {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--line-strong);
  font-size: 12.5px;
  color: var(--stone);
  text-align: center;
  line-height: 1.5;
}
.login-levels strong { color: var(--wine-dark); }

/* ---------- Dashboard: tarjeta de equipo bloqueada ---------- */
.admin-card { position: relative; }
.admin-card.locked { opacity: 0.72; }
.admin-lock {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
  border: 1px solid var(--line-strong);
  padding: 4px 10px;
  margin-top: 4px;
}
.btn-disabled {
  border-color: var(--line-strong) !important;
  color: var(--stone-light) !important;
  background: transparent !important;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   Sucursales (público)
   ========================================================================== */
.branch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.branch-card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 30px;
}
.branch-head h3 {
  font-size: 22px;
  margin-bottom: 18px;
}
.branch-rows { display: flex; flex-direction: column; }
.branch-row {
  display: flex;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--line-strong);
  font-size: 14px;
}
.branch-row:last-child { border-bottom: none; }
.branch-row .k {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
  width: 92px;
  flex-shrink: 0;
}
.branch-localities {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.branch-loc-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--stone);
}
.branch-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.branch-chip {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  color: var(--wine-dark);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.branch-chip:hover {
  background: var(--wine);
  border-color: var(--wine);
  color: var(--paper);
}

/* Mini-sucursal dentro de la ficha */
.branch-mini-name {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--charcoal);
  margin-bottom: 6px;
}
.branch-mini-row {
  font-size: 13px;
  color: var(--stone);
  padding: 2px 0;
}

/* Logo con imagen */
.logo-mark.has-image { color: transparent; }
.logo-mark.has-image::before { display: none; }

/* ==========================================================================
   Panel de configuración de marca
   ========================================================================== */
.config-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: start;
}
.config-preview {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 26px;
  position: sticky;
  top: 100px;
}
.preview-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 18px;
  border: 1px dashed var(--line-strong);
  background: var(--ivory);
}
.preview-header .logo-mark { width: 58px; height: 58px; }
.preview-header .name {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--charcoal);
}
.preview-header .tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  display: block;
  margin-top: 2px;
}

@media (max-width: 820px) {
  .branch-grid { grid-template-columns: 1fr; }
  .config-layout { grid-template-columns: 1fr; }
  .config-preview { position: static; }
}

/* ==========================================================================
   Carrusel de medios (ficha)
   ========================================================================== */
.carousel {
  position: relative;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  padding: 10px;
  margin-bottom: 14px;
}
.carousel-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #000;
  overflow: hidden;
}
.cslide { width: 100%; height: 100%; }
.cslide img,
.cslide video,
.cslide iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}
/* Auditoría 27/09/2026: aviso cuando el enlace de un video no sirve. */
.carousel-empty,
.mp-sin-video {
  width: 100%; height: 100%; min-height: 160px;
  display: flex; align-items: center; justify-content: center;
  color: #fdfbf7; background: #241d1a;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em;
}
.cslide.zoomable { cursor: zoom-in; }
.cslide img { transition: transform 0.5s ease; }
.cslide.zoomable:hover img { transform: scale(1.03); }
.zoom-hint {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(36,29,26,0.8);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.cslide.zoomable:hover .zoom-hint { opacity: 1; }
.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  background: rgba(253,251,247,0.9);
  color: var(--wine);
  font-size: 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.carousel-nav:hover,
.carousel-nav:focus-visible { background: var(--wine); color: var(--paper); }
.carousel-nav.prev { left: 18px; }
.carousel-nav.next { right: 18px; }
.carousel-nav.prev:hover { transform: translateY(-50%) translateX(-2px); }
.carousel-nav.next:hover { transform: translateY(-50%) translateX(2px); }
.carousel-counter {
  position: absolute;
  bottom: 18px;
  left: 18px;
  background: rgba(36,29,26,0.8);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 5px 10px;
}
/* ⚠️ Sin este renglón, esconder la galería no funcionaba: el "display: flex"
   de acá abajo le gana al "escondeme" del HTML y la caja se veía igual, vacía.
   Ya nos pasó dos veces en otras pantallas. (05/09/2026.) */
.carousel[hidden], .carousel-thumbs[hidden] { display: none !important; }
.carousel-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.cthumb {
  position: relative;
  width: 84px;
  height: 60px;
  border: 1px solid var(--line-strong);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  background: var(--ivory);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.cthumb img { width: 100%; height: 100%; object-fit: cover; }
.cthumb.active { border-color: var(--wine); }
.cthumb:hover,
.cthumb:focus-visible { transform: translateY(-3px); border-color: var(--wine-soft); }
.cthumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(36,29,26,0.35);
  color: #fff;
  font-size: 15px;
}
.cthumb-blank { display: block; width: 100%; height: 100%; background: var(--line); }

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20,14,12,0.93);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 400;
  padding: 40px;
}
.lightbox.open { display: flex; animation: lb-fade 0.25s ease; }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox-stage { max-width: min(1100px, 92vw); max-height: 86vh; }
.lightbox-stage img,
.lightbox-stage video {
  max-width: 100%;
  max-height: 86vh;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}
.lightbox-stage iframe {
  width: min(1100px, 92vw);
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}
.lightbox-close {
  position: absolute;
  top: 18px;
  right: 26px;
  background: none;
  border: none;
  color: #fff;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.12);
  border: none;
  color: #fff;
  width: 54px;
  height: 54px;
  font-size: 30px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.28); }
.lightbox-nav.prev { left: 24px; }
.lightbox-nav.next { right: 24px; }
.lightbox-counter {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
}

/* 14/09/2026 — panel de "Publicar en redes" dentro de la ventana flotante
   (admin-propiedades.html). A diferencia de una imagen/video sueltos, acá
   adentro va un formulario chico, así que necesita su propia tarjeta clara
   con texto legible (el fondo de la ventana flotante es oscuro). */
.pub-publicar-panel {
  background: #fdfbf7;
  color: #241d1a;
  padding: 22px;
  border-radius: 8px;
  max-width: 380px;
  max-height: 86vh;
  overflow-y: auto;
  text-align: left;
}
.pub-publicar-panel h4 { margin: 0 0 12px; }
.pub-publicar-panel img,
.pub-publicar-panel video {
  max-width: 100%;
  max-height: 220px;
  display: block;
  margin: 0 auto 12px;
  border-radius: 6px;
}
.pub-publicar-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  cursor: pointer;
  margin-bottom: 6px;
}
.pub-publicar-panel .field-hint { color: #6b5f57; }
.pub-publicar-panel button { margin-top: 10px; }
/* 14/09/2026, tercera vuelta — elegir entre varios archivos cargados (flyer/
   video/imagen de historia) antes de publicar, cuando hay más de uno. */
.pub-publicar-panel .pub-elegir-media {
  background: #f6f1e7;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.pub-publicar-panel .pub-elegir-media label { margin-bottom: 4px; }
.pub-publicar-panel .pub-elegir-media label:last-child { margin-bottom: 0; }

/* 14/09/2026, cuarta vuelta — Flavio pidió que SIEMPRE se vea qué archivos
   hay (y cuáles faltan) antes de publicar, no solo cuando hay más de uno: le
   pasó que una propiedad solo tenía video y el sistema publicaba directo sin
   mostrar que no había flyer. Ahora cada archivo posible aparece como una
   miniatura clickeable (la elegida queda marcada), y el que falta aparece
   como un casillero gris con "Sin cargar" en vez de desaparecer. También
   pidió poder revisar el copy y el texto corto ahí mismo antes de publicar
   (sin editarlos — para eso sigue haciendo falta entrar a la ficha). */
.pub-publicar-panel .pub-revision {
  background: #f6f1e7;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 13px;
}
.pub-publicar-panel .pub-revision-linea { margin-bottom: 6px; }
.pub-publicar-panel .pub-revision-linea:last-child { margin-bottom: 0; }
.pub-publicar-panel .pub-media-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pub-publicar-panel .pub-media-chip {
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}
.pub-publicar-panel .pub-media-chip img,
.pub-publicar-panel .pub-media-chip video {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  margin: 0;
  max-height: none;
}
.pub-publicar-panel .pub-media-chip small { font-size: 11px; line-height: 1.2; color: #6b5f57; }
.pub-publicar-panel .pub-media-chip.seleccionado { border-color: var(--wine); background: #fdf4ee; }
.pub-publicar-panel .pub-media-chip.seleccionado small { color: var(--wine); font-weight: 600; }
.pub-publicar-panel .pub-media-chip-vacio {
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px;
  border: 2px dashed var(--line);
  border-radius: 8px;
  color: #a89c92;
  font-size: 11px;
  text-align: center;
  min-height: 74px;
  cursor: default;
}
.pub-publicar-panel .pub-media-chip-vacio span { font-size: 11px; font-weight: 600; }
.pub-publicar-panel .pub-media-chip-vacio small { font-size: 10px; }

/* ==========================================================================
   Banda de sucursal (ficha / listado / contacto)
   ========================================================================== */
.branch-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--wine);
  background: var(--paper);
  padding: 20px 24px;
  margin-bottom: 32px;
}
.branch-band-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
  display: block;
}
.branch-band-name {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--wine-dark);
  display: block;
  margin-top: 4px;
}
.branch-band-meta {
  font-size: 13px;
  color: var(--stone);
  display: block;
  margin-top: 4px;
}
.branch-band-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ==========================================================================
   Chips de video (panel de propiedades)
   ========================================================================== */
.video-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.video-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-strong);
  padding: 7px 10px;
  background: var(--ivory);
}
.video-chip-ico { color: var(--wine); font-size: 11px; }
.video-chip-label { font-family: var(--font-mono); font-size: 11.5px; color: var(--charcoal); }
.video-chip-remove {
  border: none;
  background: none;
  color: var(--stone);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.video-chip-remove:hover { color: var(--wine); }
.video-chip-pos-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--stone);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.video-chip-pos {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--charcoal);
  border: 1px solid var(--line-strong);
  background: var(--paper);
  padding: 3px 6px;
}

/* ==========================================================================
   Movimiento: aparición al hacer scroll (solo cuando hay JS y sin reduce-motion)
   ========================================================================== */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js-anim .reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   Micro-interacciones en foco / hover
   ========================================================================== */
.btn {
  transition: background 0.2s ease, color 0.2s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(89,0,0,0.16);
}
.btn:active { transform: translateY(0); box-shadow: none; }

.property-card { transition: border-color 0.2s ease, transform 0.28s ease, box-shadow 0.28s ease; }
.property-card:hover,
.property-card:focus-within {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(36,29,26,0.13);
}
.property-media img { transition: transform 0.5s ease; }
.property-card:hover .property-media img { transform: scale(1.05); }

.cat-card { transition: background 0.2s ease, transform 0.25s ease; }
.cat-card:hover { transform: translateY(-4px); }

.team-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.team-card:hover { transform: translateY(-5px); box-shadow: 0 16px 30px rgba(36,29,26,0.12); }
.team-photo img { transition: transform 0.6s ease; }
.team-card:hover .team-photo img { transform: scale(1.05); }

.branch-card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease; }
.branch-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(36,29,26,0.1); border-color: var(--line-strong); }

.admin-card { transition: transform 0.22s ease, box-shadow 0.22s ease; }
.admin-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(36,29,26,0.1); }

.main-nav a { transition: color 0.2s ease, transform 0.2s ease; }
.main-nav a:hover { transform: translateY(-1px); }

.logo-mark { transition: transform 0.3s ease; }
.logo:hover .logo-mark { transform: rotate(-6deg) scale(1.04); }

.team-contact, .footer-grid a { transition: color 0.2s ease; }

/* Si el usuario prefiere menos movimiento, desactivar transforms de aparición */
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal { opacity: 1 !important; transform: none !important; }
  .btn:hover, .btn:focus-visible,
  .property-card:hover, .property-card:focus-within,
  .cat-card:hover, .team-card:hover, .branch-card:hover, .admin-card:hover { transform: none; }
}

/* Botón "Ampliar" sobre el video en el carrusel */
.stage-expand {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(36,29,26,0.8);
  color: var(--paper);
  border: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 7px 11px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.stage-expand:hover { background: var(--wine); }

/* ==========================================================================
   Mapa en la ficha
   ========================================================================== */
.ficha-map {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 22px;
  margin-bottom: 48px;
}
.ficha-map-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ficha-map-head h2 { font-size: 22px; }
.map-embed {
  aspect-ratio: 16 / 8;
  overflow: hidden;
  border: 1px solid var(--line);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-note {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--stone-light);
  margin-top: 10px;
}

/* Línea de martillero responsable en la banda de sucursal */
.branch-band-resp {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--charcoal);
}
.branch-band-resp strong { color: var(--wine-dark); }

/* Separador "Acceso al panel interno" en el formulario de equipo */
.access-divider {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  border-top: 1px dashed var(--line-strong);
  padding-top: 18px;
  margin-top: 4px;
}

/* ==========================================================================
   Consultas (panel)
   ========================================================================== */
.inquiry-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  background: var(--paper);
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: 1fr 240px;
}
.inquiry-card.unread { border-left-color: var(--wine); }
.inquiry-card.assigned { border-left-color: var(--success); }
.inquiry-main { padding: 22px 24px; }
.inquiry-side {
  border-left: 1px dashed var(--line-strong);
  padding: 20px;
  background: var(--ivory);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.side-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.assigned-to { display: flex; gap: 12px; align-items: center; }
.assigned-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--success);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 17px;
  flex-shrink: 0;
}
.assigned-name {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--charcoal);
}
.assigned-when {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--stone);
  margin-top: 2px;
}
.assigned-none {
  font-size: 13px;
  color: var(--stone);
  font-style: italic;
}
.side-btn {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
  color: var(--charcoal);
  margin-top: auto;
}
.side-btn:hover { border-color: var(--wine); color: var(--wine); }
.side-btn.take { border-color: var(--success); color: var(--success); }
.side-btn.take:hover { background: var(--success); color: var(--paper); }
.inquiry-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.inquiry-name {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--charcoal);
}
.inquiry-motivo {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--wine);
  padding: 3px 9px;
  margin-left: 10px;
}
.inquiry-card.unread .inquiry-name::before {
  content: "●";
  color: var(--wine);
  font-size: 10px;
  vertical-align: middle;
  margin-right: 8px;
}
.inquiry-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--stone);
}
.inquiry-contact { margin-top: 10px; font-size: 13px; }
.inquiry-contact a { color: var(--wine-dark); }
.inquiry-contact a:hover { text-decoration: underline; }
.inquiry-ref {
  margin-top: 8px;
  font-size: 13px;
  color: var(--stone);
}
.inquiry-ref a { color: var(--wine-dark); }
.inquiry-ref a:hover { text-decoration: underline; }
.inquiry-msg {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--ivory);
  border: 1px dashed var(--line-strong);
  font-size: 14px;
  color: var(--charcoal);
  white-space: pre-wrap;
}
.inquiry-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  flex-wrap: wrap;
}
.inquiry-actions button,
.inquiry-actions .btn-inline {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
  color: var(--charcoal);
}
.inquiry-actions button:hover,
.inquiry-actions .btn-inline:hover { border-color: var(--wine); color: var(--wine); }
.inquiry-actions button.danger:hover { background: var(--wine); border-color: var(--wine); color: var(--paper); }

/* ==========================================================================
   Refinamientos para celular / tablet
   ========================================================================== */

/* Tarjetas de consulta: panel de seguimiento pasa abajo en pantallas medianas */
@media (max-width: 820px) {
  .inquiry-card { grid-template-columns: 1fr; }
  .inquiry-side {
    border-left: none;
    border-top: 1px dashed var(--line-strong);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .inquiry-side .side-btn { margin-top: 0; }
}

@media (max-width: 760px) {
  /* Más aire lateral en pantallas chicas */
  .container { padding: 0 20px; }

  /* Encabezados de sección se apilan */
  .section-head { flex-direction: column; align-items: flex-start; }
  .section-head .btn { align-self: flex-start; }

  /* Encabezado del panel interno: se adapta y no se desborda */
  .admin-header .container {
    height: auto;
    padding: 12px 0;
    flex-wrap: wrap;
    gap: 10px 14px;
  }
  .admin-header-actions { gap: 12px; flex-wrap: wrap; }
  .admin-header-actions a { font-size: 12.5px; }

  /* Barra de herramientas del panel: botones full-width y ordenados */
  .admin-toolbar { flex-direction: column; align-items: stretch; }
  .admin-toolbar > div { display: flex; flex-wrap: wrap; gap: 10px; }
  .admin-toolbar .btn { flex: 1; justify-content: center; }

  /* Formularios del panel en una sola columna (por si algún grid quedó en 2) */
  .form-grid-2 { grid-template-columns: 1fr; }

  /* Banda de sucursal: apilar info y acciones */
  .branch-band { flex-direction: column; align-items: flex-start; }
  .branch-band-actions { width: 100%; }
  .branch-band-actions .btn { flex: 1; justify-content: center; }

  /* Mapa de la ficha: un poco más alto para verlo mejor en vertical */
  .map-embed { aspect-ratio: 4 / 3; }
  .ficha-map-head { flex-direction: column; align-items: flex-start; }

  /* Lightbox más cómodo en pantallas chicas */
  .lightbox { padding: 14px; }
  .lightbox-close { top: 8px; right: 14px; font-size: 34px; }
  .lightbox-nav { width: 42px; height: 42px; font-size: 24px; }
  .lightbox-nav.prev { left: 8px; }
  .lightbox-nav.next { right: 8px; }

  /* Carrusel: flechas un poco más chicas */
  .carousel-nav { width: 38px; height: 38px; font-size: 22px; }
  .carousel-nav.prev { left: 10px; }
  .carousel-nav.next { right: 10px; }

  /* Tablas del panel: pista de que se pueden deslizar */
  .admin-table-wrap { position: relative; }
  .admin-table { min-width: 640px; }
}

/* Celulares angostos */
@media (max-width: 480px) {
  .container { padding: 0 16px; }

  /* Logo un toque más chico para que entre junto al menú */
  .site-header .container { height: 74px; }
  .main-nav { top: 74px; }
  .logo-mark { width: 48px; height: 48px; font-size: 16px; }
  .logo-text .name { font-size: 18px; }
  .logo-text .tag { font-size: 9.5px; }

  .ficha-price { font-size: 24px; }
  .hero { padding-top: 40px; }
  .btn { padding: 12px 20px; font-size: 12px; }

  /* Chips de filtro más compactos */
  .filter-chip { padding: 9px 13px; font-size: 11.5px; }

  /* Miniaturas del carrusel un poco más chicas */
  .cthumb { width: 68px; height: 50px; }

  /* Consultas: avatar y textos ajustados */
  .inquiry-main { padding: 18px; }
  .inquiry-side { padding: 16px 18px; }
}

/* ==========================================================================
   Permisos (casillas en el form de equipo)
   ========================================================================== */
.perms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 16px;
  margin-top: 6px;
}
.perm-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--charcoal);
  padding: 6px 0;
  cursor: pointer;
}
.perm-check input { width: 16px; height: 16px; accent-color: var(--wine); }

/* ==========================================================================
   Compartir propiedad (ficha)
   ========================================================================== */
.share-box {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed var(--line-strong);
}
.share-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.share-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.share-actions .btn { flex: 1; justify-content: center; min-width: 140px; }

/* ==========================================================================
   Miniatura del martillero responsable
   ========================================================================== */
.branch-band-resp { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.resp-thumb {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  flex-shrink: 0;
}
.branch-resp-cell { display: inline-flex; align-items: center; gap: 8px; }

/* ==========================================================================
   Modal de mapa de sucursal
   ========================================================================== */
.map-modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 15, 13, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
}
.map-modal.open { display: flex; }
.map-modal-box {
  background: var(--paper);
  width: min(760px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-strong);
}
.map-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.map-modal-title { display: block; font-family: var(--font-display); font-size: 18px; color: var(--charcoal); }
.map-modal-sub { display: block; font-size: 13px; color: var(--stone); margin-top: 2px; }
.map-modal-close {
  background: none;
  border: none;
  font-size: 30px;
  line-height: 1;
  color: var(--stone);
  cursor: pointer;
}
.map-modal-close:hover { color: var(--wine); }
.map-modal-body { flex: 1; min-height: 320px; }
.map-modal-body iframe { width: 100%; height: 46vh; border: 0; display: block; }
.map-modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); text-align: right; }

/* ==========================================================================
   Consultas agrupadas por teléfono
   ========================================================================== */
.inquiry-group {
  border: 1px solid var(--line);
  background: var(--paper);
  margin-bottom: 22px;
}
.group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.group-name { font-family: var(--font-display); font-size: 19px; color: var(--charcoal); }
.group-phone { font-size: 13px; color: var(--stone); margin-left: 12px; }
.group-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--wine);
  padding: 4px 10px;
}
.group-items { padding: 8px 22px 18px; }
.inq-item {
  border-bottom: 1px dashed var(--line-strong);
  padding: 18px 0;
}
.inq-item:last-child { border-bottom: none; }
.inq-item.unread { position: relative; }
.inq-item.unread::before {
  content: "●";
  color: var(--wine);
  font-size: 10px;
  position: absolute;
  left: -14px;
  top: 22px;
}
.inq-item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.inq-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  margin-left: 8px;
}
.status-abierta { background: var(--ivory); color: var(--stone); border: 1px solid var(--line-strong); }
.status-resuelto { background: var(--success); color: var(--paper); }
.status-sin_resolver { background: #9a3412; color: var(--paper); }
.inq-prop { margin-left: 10px; font-size: 14px; color: var(--wine-dark); }
.inq-prop.muted { color: var(--stone); }
.inq-prop:hover { text-decoration: underline; }
.inq-track { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.inq-assigned { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--charcoal); }
.assigned-avatar.sm { width: 24px; height: 24px; font-size: 12px; }
.inq-log { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.inq-log-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--ivory);
  border-left: 2px solid var(--gold);
  padding: 8px 12px;
}
.inq-log-meta { font-family: var(--font-mono); font-size: 11px; color: var(--stone); }
.inq-log-text { font-size: 14px; color: var(--charcoal); }
.inq-log-empty { margin-top: 12px; font-size: 13px; color: var(--stone-light); font-style: italic; }
.inq-log-wrap { margin-top: 12px; }
.inq-log-add { display: flex; gap: 8px; margin-top: 10px; }
.inq-log-input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-sans);
  font-size: 13.5px;
}
.inq-filters {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 16px 18px;
  background: var(--ivory);
  border: 1px solid var(--line);
  margin-bottom: 22px;
}
.inq-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--stone);
}
.inq-filters select, .inq-filters input {
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-sans);
  font-size: 13.5px;
  min-width: 130px;
}
.row-unread { background: rgba(89, 0, 0, 0.03); }

/* ==========================================================================
   Novedades (home)
   ========================================================================== */
.news-list { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.news-card { background: var(--paper); padding: 24px 26px; }
.news-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.news-head h3 { font-family: var(--font-display); font-size: 21px; color: var(--charcoal); }
.news-date { font-family: var(--font-mono); font-size: 12px; color: var(--stone); }
.news-summary { margin-top: 8px; color: var(--stone); }
.news-body { margin-top: 12px; color: var(--stone); line-height: 1.7; }
.news-toggle {
  margin-top: 14px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--wine);
  color: var(--wine);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 0;
  cursor: pointer;
}
.news-toggle:hover { color: var(--wine-dark); border-color: var(--wine-dark); }

/* ==========================================================================
   Editor de home + formularios públicos
   ========================================================================== */
.home-img-preview {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  display: none;
  margin-bottom: 10px;
}
.home-preview { background: var(--ivory); border: 1px solid var(--line); padding: 22px; }
.home-preview .eyebrow { display: block; }
.home-preview h3 { font-family: var(--font-display); font-size: 24px; color: var(--charcoal); margin-top: 6px; }
.home-preview em { color: var(--wine); font-style: italic; }
.home-preview p { margin-top: 10px; color: var(--stone); font-size: 14px; }
.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 30px;
  max-width: 760px;
}

/* ==========================================================================
   Fotos de sucursal
   ========================================================================== */
.photo-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.photo-chip { position: relative; width: 96px; height: 72px; }
.photo-chip img { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--line-strong); }
.photo-chip button {
  position: absolute; top: -8px; right: -8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--wine); color: var(--paper); border: none;
  cursor: pointer; font-size: 15px; line-height: 1;
}
.branch-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 4px 0 18px;
}
.branch-photo { width: 100%; height: 110px; object-fit: cover; border: 1px solid var(--line); cursor: zoom-in; }

/* ==========================================================================
   Resguardos
   ========================================================================== */
.backup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.backup-card { border: 1px solid var(--line); background: var(--paper); padding: 28px; }
.backup-card h3 { font-family: var(--font-display); font-size: 21px; margin: 10px 0 8px; }
.backup-card p { color: var(--stone); margin-bottom: 16px; }
.backup-summary { margin: 16px 0; }
.backup-list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); }
.backup-list li { display: flex; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.backup-list li:last-child { border-bottom: none; }
.backup-list strong { font-family: var(--font-mono); color: var(--wine-dark); }
.restore-drop { border: 1px dashed var(--line-strong); padding: 18px; margin-bottom: 14px; }
.restore-error { color: var(--wine); font-size: 14px; }
.backup-note { margin-top: 28px; padding: 20px 24px; background: var(--ivory); border-left: 3px solid var(--gold); }
.backup-note h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }

/* ==========================================================================
   Estadísticas
   ========================================================================== */
.stats-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 32px; }
.stat-card { background: var(--paper); padding: 20px; text-align: center; }
.stat-num { display: block; font-family: var(--font-display); font-size: 34px; color: var(--wine-dark); }
.stat-label { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--stone); margin-top: 6px; }
.stats-block { margin-bottom: 34px; }
.stats-block h3 { font-family: var(--font-display); font-size: 20px; margin-bottom: 16px; }
.stats-two { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.stats-bars { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 140px 1fr 44px; align-items: center; gap: 12px; }
.bar-label { font-size: 13px; color: var(--charcoal); }
.bar-track { height: 16px; background: var(--ivory); border: 1px solid var(--line); position: relative; }
.bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--wine); }
.bar-val { font-family: var(--font-mono); font-size: 13px; text-align: right; color: var(--stone); }

/* ==========================================================================
   Informes imprimibles
   ========================================================================== */
.report-body { background: var(--stone-lighter, #e8e4dc); }
.report-toolbar { background: var(--charcoal); padding: 14px 0; }
.report-toolbar .container { display: flex; justify-content: space-between; align-items: center; }
.report-toolbar a { color: var(--paper); font-size: 14px; }
.report-sheet {
  max-width: 820px;
  margin: 30px auto;
  background: #fff;
  padding: 48px 54px;
  box-shadow: 0 4px 30px rgba(0,0,0,0.12);
}
.report-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--wine); padding-bottom: 16px; margin-bottom: 24px; }
.report-brand { font-family: var(--font-display); font-size: 24px; color: var(--wine-dark); }
.report-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); margin-top: 4px; }
.report-date { font-family: var(--font-mono); font-size: 12px; color: var(--stone); }
.report-title { font-family: var(--font-display); font-size: 28px; color: var(--charcoal); margin-bottom: 12px; }
.report-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--stone); margin-bottom: 28px; }
.report-kpis { display: flex; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; }
.report-kpi { flex: 1; min-width: 130px; border: 1px solid var(--line); padding: 18px; text-align: center; }
.k-num { display: block; font-family: var(--font-display); font-size: 32px; color: var(--wine-dark); }
.k-lbl { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--stone); margin-top: 6px; }
.report-h2 { font-family: var(--font-display); font-size: 19px; color: var(--charcoal); margin: 28px 0 12px; }
.report-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.report-table th { text-align: left; background: var(--ivory); padding: 9px 12px; border: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.report-table td { padding: 9px 12px; border: 1px solid var(--line); }
.report-empty { color: var(--stone); font-style: italic; padding: 8px 0; }
.report-foot { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--stone); }
.report-note { font-size: 11px; margin-top: 6px; }

@media print {
  .no-print, .report-toolbar { display: none !important; }
  .report-body { background: #fff; }
  .report-sheet { box-shadow: none; margin: 0; max-width: none; padding: 0; }
  @page { margin: 1.4cm; }
}

@media (max-width: 900px) {
  .stats-cards { grid-template-columns: repeat(3, 1fr); }
  .stats-two { grid-template-columns: 1fr; gap: 24px; }
  .backup-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .stats-cards { grid-template-columns: repeat(2, 1fr); }
  .bar-row { grid-template-columns: 100px 1fr 36px; }
  .branch-photos { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Campo de foto del integrante (equipo)
   ========================================================================== */
.agent-photo-field { display: flex; gap: 18px; align-items: flex-start; }
.agent-photo-preview {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  background: var(--ivory);
  display: none;
  flex-shrink: 0;
}
.agent-photo-controls { display: flex; flex-direction: column; gap: 6px; }
.photo-url-details { margin-top: 12px; }
.photo-url-details summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--stone);
}
.photo-url-details summary:hover { color: var(--wine); }
.photo-url-details input { margin-top: 8px; }

/* ==========================================================================
   Botón flotante de WhatsApp
   ========================================================================== */
#wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  z-index: 900;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
#wa-float:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
#wa-float svg { display: block; }
@media (max-width: 560px) {
  #wa-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}
@media print {
  #wa-float { display: none !important; }
}

/* ==========================================================================
   Números de trayectoria e testimonios (inicio)
   ========================================================================== */
.stats-band { padding-top: 40px; padding-bottom: 40px; }
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.stat-item {
  background: var(--paper);
  padding: 28px 18px;
  text-align: center;
}
.stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--wine-dark);
}
.stat-caption {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--stone);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testimonial-card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.testimonial-stars { color: var(--gold); letter-spacing: 2px; font-size: 15px; }
.testimonial-card blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.5;
  color: var(--charcoal);
  font-style: italic;
}
.testimonial-card figcaption { margin-top: auto; }
.testimonial-name {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--wine-dark);
}
.testimonial-role {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--stone);
  margin-top: 3px;
}
@media (max-width: 900px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .stat-number { font-size: 32px; }
}

/* ==========================================================================
   Buscador de propiedades (panel)
   ========================================================================== */
.admin-search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
}
.admin-search-bar input[type="search"] {
  flex: 1;
  min-width: 220px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--charcoal);
}
.admin-search-bar input[type="search"]:focus {
  outline: none;
  border-color: var(--wine);
}
.admin-search-bar select {
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--charcoal);
  cursor: pointer;
}
@media (max-width: 640px) {
  .admin-search-bar input[type="search"] { min-width: 100%; }
  .admin-search-bar select { flex: 1; }
}


/* ==========================================================================
   TRES ACCESOS PRINCIPALES (portada)
   Reemplazan a los tres botones chicos que pasaban desapercibidos:
   "Ver propiedades", "Contanos qué buscás" y "Quiero vender".
   Mantienen la estética de ficha: líneas rectas, mono en los rótulos y
   el vino de la marca. Las tres pesan lo mismo a propósito.
   ========================================================================== */
.accesos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0 0 44px;
}
.acceso {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 22px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--wine);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.acceso::after {
  /* franja de color que se llena al pasar el mouse */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0;
  background: var(--wine);
  transition: height 0.18s ease;
}
.acceso:hover,
.acceso:focus-visible {
  transform: translateY(-3px);
  border-color: var(--wine);
  box-shadow: 0 10px 26px rgba(89, 0, 0, 0.13);
}
.acceso:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
.acceso:hover::after,
.acceso:focus-visible::after { height: 4px; }

.acceso-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border: 1px dashed var(--wine);
  border-radius: 50%;
  color: var(--wine);
  background: rgba(89, 0, 0, 0.045);
  flex: none;
}
.acceso-ico svg { width: 24px; height: 24px; }

.acceso-num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-light);
}
.acceso h3 {
  font-family: var(--font-display);
  font-size: 23px;
  line-height: 1.15;
  margin: 6px 0 8px;
  color: var(--wine);
}
.acceso p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--stone);
}
.acceso-go {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wine);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.acceso-go em {
  font-style: normal;
  transition: transform 0.18s ease;
}
.acceso:hover .acceso-go em { transform: translateX(5px); }

@media (max-width: 900px) {
  .accesos { grid-template-columns: 1fr; gap: 14px; margin-bottom: 34px; }
  .acceso { padding: 20px 20px 18px; }
  .acceso-ico { width: 40px; height: 40px; margin-bottom: 12px; }
  .acceso-ico svg { width: 21px; height: 21px; }
  .acceso h3 { font-size: 21px; }
  .acceso p { margin-bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .acceso, .acceso::after, .acceso-go em { transition: none; }
  .acceso:hover { transform: none; }
}


/* ==========================================================================
   CAMPOS EXTRA DE LAS PROPIEDADES
   (panel interno: formulario · sitio público: ficha)
   ========================================================================== */

/* ---------- Panel: encabezado del bloque ---------- */
.cx-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.cx-todos {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--stone);
  cursor: pointer;
  white-space: nowrap;
}
.cx-todos input { width: 17px; height: 17px; accent-color: var(--wine); cursor: pointer; }

.cx-leyenda {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 9px 13px;
  background: var(--ivory);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--stone);
}
.cx-leyenda > span:not(.cx-ojo-demo) { margin-right: 12px; }
.cx-ojo-demo { display: inline-flex; color: var(--wine); }
.cx-ojo-demo.tachado { color: var(--stone-light); }
.cx-ojo-demo svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* ---------- Panel: grupos plegables ---------- */
.cx-grupo {
  border: 1px solid var(--line);
  background: var(--paper);
  margin-bottom: 10px;
}
.cx-grupo > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wine);
  background: var(--ivory);
  list-style: none;
}
.cx-grupo > summary::-webkit-details-marker { display: none; }
.cx-grupo > summary::before {
  content: "▸";
  font-size: 11px;
  transition: transform 0.15s ease;
}
.cx-grupo[open] > summary::before { transform: rotate(90deg); }
.cx-grupo > summary:hover { background: #f0e8db; }
.cx-cont {
  margin-left: auto;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--stone-light);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 2px 9px;
  text-transform: none;
}
.cx-cont.hay { color: var(--success); border-color: #b9cdb9; background: #eef4ee; }

.cx-rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  padding: 16px 15px;
}
.cx-fila { display: flex; flex-direction: column; min-width: 0; }
.cx-fila.ancho { grid-column: 1 / -1; }
/* 06/09/2026 — #caja-propietario-contacto envuelve varias .cx-fila adentro de
   .cx-rejilla (que es display:grid) para poder esconderlas juntas según el
   permiso "Ver los datos del propietario". Sin display:contents, ese div
   envoltorio pasa a ser UN solo item de la grilla y las .cx-fila de adentro
   se apilan mal, en vez de acomodarse cada una en su lugar de la grilla. Y,
   como ya pasó antes: [hidden] pierde contra cualquier otro display si no se
   lo gana a propósito. */
#caja-propietario-contacto { display: contents; }
#caja-propietario-contacto[hidden] { display: none !important; }
.cx-fila > label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 5px;
}
.cx-control { display: flex; align-items: stretch; gap: 6px; }
.cx-control input,
.cx-control textarea {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--charcoal);
  resize: vertical;
}
.cx-control input:focus,
.cx-control textarea:focus { outline: none; border-color: var(--wine); }

.cx-ojo {
  flex: none;
  width: 38px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--wine);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cx-ojo svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.cx-ojo:hover { border-color: var(--wine); background: var(--ivory); }
.cx-ojo:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }

/* Campo tapado con el ojito: se nota de un vistazo */
.cx-fila.oculto > label { color: var(--stone); }
.cx-fila.oculto > label::after {
  content: " · interno";
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}
.cx-fila.oculto .cx-control input,
.cx-fila.oculto .cx-control textarea {
  background: #f4efe6;
  border-style: dashed;
  color: var(--stone);
}
.cx-fila.oculto .cx-ojo { color: var(--gold); border-color: var(--gold); }

.cx-aviso {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--gold);
}
.cx-nada { color: var(--stone); font-size: 14px; padding: 14px 2px; }

/* ---------- Panel: caja de datos internos ---------- */
.cx-interno-caja {
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--charcoal);
  background: #f4f1ec;
}
.cx-interno-head { padding: 15px 18px 4px; }
.cx-interno-head h4 {
  margin: 0 0 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.cx-interno-head p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--stone);
  max-width: 72ch;
}

/* ---------- Secciones desplegables del formulario de propiedades ----------
   14/09/2026, a pedido de Flavio — el formulario se hacía muy largo al
   EDITAR una ficha ya cargada, así que las secciones ahora son cajas
   plegables (<details>/<summary> nativo del navegador, sin JS propio para
   abrir/cerrar). Se apoya en la misma caja ".cx-interno-caja" que ya
   existía, nada más se le agrega el comportamiento de plegado. Arrancan
   todas CERRADAS siempre (nueva o editando), salvo las importantes (Datos
   principales, Fotos y video) — eso lo decide el JS (aplicarEstadoSecciones)
   con la propiedad .open de cada <details>. */
details.form-seccion { cursor: default; }
details.form-seccion > summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 18px 4px;
}
details.form-seccion > summary::-webkit-details-marker { display: none; }
details.form-seccion > summary .cx-interno-head { padding: 0 0 4px; }
details.form-seccion > summary .cx-interno-head h4::after {
  content: "  ▸ mostrar";
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--stone-light);
}
details.form-seccion[open] > summary .cx-interno-head h4::after {
  content: "  ▾ ocultar";
}
details.form-seccion > summary:hover .cx-interno-head h4 { color: var(--wine); }
details.form-seccion > .form-seccion-body { padding: 4px 18px 18px; }
/* Los campos comunes reutilizan la misma grilla ".form-grid-2" de afuera,
   sin gap vertical propio (cada campo ya trae su margin-bottom). */
details.form-seccion > .form-seccion-body > .form-grid-2 { gap: 0 24px; }

@media (max-width: 780px) {
  .cx-rejilla { grid-template-columns: 1fr; padding: 13px; }
  .cx-head { flex-direction: column; gap: 8px; }
}

/* ==========================================================================
   Sitio público: los datos extra dentro de la ficha
   ========================================================================== */
.ficha-extras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 34px;
  margin-top: 6px;
}
.extra-grupo { min-width: 0; }
.extra-grupo h4 {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wine);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 720px) {
  .ficha-extras { grid-template-columns: 1fr; gap: 20px; }
}
.cx-fuera {
  margin: 10px 0 0;
  padding: 10px 13px;
  background: #fdf6e8;
  border: 1px solid #e6d3a8;
  font-size: 13px;
  line-height: 1.45;
  color: #7a5a17;
}

/* Los datos extra pueden traer textos largos ("38 ha con derecho, turno los
   martes"). En el recuadro lateral los valores son cortos y no hace falta,
   pero acá tienen que poder cortarse en varias líneas y no desbordar. */
.ficha-extras .ledger-row { flex-wrap: wrap; }
.ficha-extras .ledger-row .k { white-space: normal; }
.ficha-extras .ledger-row .dots { min-width: 16px; }
.ficha-extras .ledger-row .v {
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: right;
  margin-left: auto;
  min-width: 0;
}
.cx-cont.ojo {
  margin-left: 6px;
  color: var(--wine);
  border-color: #d9bfbf;
  background: #f7eeee;
}


/* ==========================================================================
   FICHA DEL CLIENTE (todo lo de una misma persona, junto)
   ========================================================================== */
.cli-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px 22px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--wine);
}
.cli-cabeza h3 { margin: 0 0 4px; font-size: 24px; }
.cli-datos { color: var(--stone); font-size: 14px; }
.cli-acciones { display: flex; gap: 10px; flex-wrap: wrap; }

.cli-alerta {
  margin-top: 12px;
  padding: 12px 16px;
  background: #fdf6e8;
  border: 1px solid #e6d3a8;
  color: #7a5a17;
  font-size: 14.5px;
  line-height: 1.5;
}

.cli-bloque { margin-top: 26px; }
.cli-bloque > h3 {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wine);
  display: flex;
  align-items: center;
  gap: 9px;
}
.cli-n {
  font-size: 11px;
  color: var(--stone);
  background: var(--ivory);
  border: 1px solid var(--line);
  padding: 1px 8px;
}
.cli-item {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  background: var(--paper);
  padding: 14px 17px;
  margin-bottom: 9px;
}
.cli-item-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}
.cli-fecha { font-size: 12.5px; color: var(--stone); }
.cli-prop { font-weight: 600; font-size: 15px; }
.cli-prop a { color: var(--wine); }
.cli-texto {
  margin: 7px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--charcoal);
  white-space: pre-wrap;
}
.cli-log {
  margin-top: 7px;
  padding-left: 12px;
  border-left: 2px solid var(--line);
  font-size: 13.5px;
  color: var(--stone);
}
.cli-por { color: var(--stone-light); }

/* ==========================================================================
   CONVERSACIONES DE FABI
   ========================================================================== */
.conv-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  align-items: start;
}
.conv-lista {
  max-height: 74vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  background: var(--paper);
}
.conv-fila {
  display: block;
  width: 100%;
  text-align: left;
  padding: 13px 15px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease;
}
.conv-fila:hover { background: var(--ivory); }
.conv-fila.activa {
  background: var(--ivory);
  box-shadow: inset 3px 0 0 var(--wine);
}
.conv-fila-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}
.conv-cuando { font-size: 11.5px; color: var(--stone-light); }
.conv-primera {
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--charcoal);
  overflow-wrap: anywhere;
}
.conv-meta { margin-top: 4px; font-size: 12px; color: var(--stone-light); }

.conv-detalle {
  border: 1px solid var(--line);
  background: var(--paper);
  min-height: 340px;
  max-height: 74vh;
  overflow-y: auto;
  padding: 20px 22px;
}
.conv-vacio { color: var(--stone-light); font-size: 15px; text-align: center; padding: 40px 0; }
.conv-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.conv-cabeza h3 { margin: 0 0 3px; font-size: 19px; }
.conv-cabeza-acc { display: flex; gap: 8px; flex-wrap: wrap; }
.conv-aviso {
  padding: 10px 14px;
  background: #eef4ee;
  border: 1px solid #b9cdb9;
  color: #2c4a2c;
  font-size: 13.5px;
  margin-bottom: 16px;
}

.msg { margin-bottom: 14px; max-width: 82%; }
.msg-quien {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--stone-light);
  margin-bottom: 3px;
}
.msg-texto {
  padding: 10px 14px;
  font-size: 14.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.msg.de-cliente { margin-left: auto; text-align: right; }
.msg.de-cliente .msg-texto {
  background: var(--wine);
  color: var(--paper);
}
.msg.de-fabi .msg-texto {
  background: var(--ivory);
  border: 1px solid var(--line);
  color: var(--charcoal);
}

@media (max-width: 900px) {
  .conv-layout { grid-template-columns: 1fr; }
  .conv-lista { max-height: 300px; }
  .conv-detalle { max-height: none; }
  .msg { max-width: 92%; }
}


/* ==========================================================================
   TEXTOS LEGALES
   ========================================================================== */
.aviso-datos {
  margin: 20px 0 0;
  padding: 12px 15px;
  background: var(--ivory);
  border: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.55;
  color: var(--stone);
}
.aviso-datos strong { color: var(--charcoal); }
.aviso-datos a { color: var(--wine); }

.footer-bottom .legal-links { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.footer-bottom .legal-links .sep { opacity: 0.5; }

/* ---------- Páginas de política y términos ---------- */
.legal-doc { max-width: 780px; }
.legal-doc h2 {
  margin: 40px 0 6px;
  font-size: 22px;
  color: var(--wine);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.legal-doc h3 { margin: 24px 0 6px; font-size: 17px; }
.legal-doc p, .legal-doc li { font-size: 15.5px; line-height: 1.65; color: var(--charcoal); }
.legal-doc ul { padding-left: 22px; }
.legal-doc li { margin: 7px 0; }
.legal-doc .actualizado {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone-light);
}
.legal-datos {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--wine);
  padding: 18px 22px;
  margin: 20px 0;
}
.legal-datos dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.legal-datos dt { color: var(--stone); font-size: 14px; }
.legal-datos dd { margin: 0; font-size: 15px; }
.legal-falta {
  background: #fdf6e8;
  border: 1px solid #e6d3a8;
  color: #7a5a17;
  padding: 14px 18px;
  margin: 20px 0;
  font-size: 14.5px;
  line-height: 1.55;
}
@media (max-width: 560px) {
  .legal-datos dl { grid-template-columns: 1fr; gap: 2px; }
  .legal-datos dt { margin-top: 8px; }
}

/* Matrícula del martillero / corredor. Va siempre al lado del nombre:
   la ley pide que acompañe a la persona en la publicidad. */
.matricula {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--wine);
  background: var(--ivory);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  vertical-align: 2px;
  white-space: nowrap;
}
.branch-band-resp .matricula,
.branch-resp-cell .matricula { background: rgba(255,255,255,.55); }


/* ==========================================================================
   CHAT EN VIVO — ETAPA 1: quién está disponible
   ========================================================================== */

/* ---------- Interruptor del encabezado del panel ---------- */
.pres-caja { position: relative; display: inline-flex; align-items: center; }
.pres-sw {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--stone);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
  white-space: nowrap;
}
.pres-sw:hover { border-color: var(--wine); }
.pres-sw:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }
.pres-luz {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--stone-light);
  flex: none;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.pres-sw.on {
  border-color: var(--success);
  color: var(--success);
  background: #eef4ee;
}
.pres-sw.on .pres-luz {
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(60, 94, 60, 0.18);
  animation: presLatido 2.4s ease-in-out infinite;
}
@keyframes presLatido {
  0%, 100% { box-shadow: 0 0 0 3px rgba(60, 94, 60, 0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(60, 94, 60, 0.06); }
}
.pres-globo {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: max-content;
  max-width: 260px;
  padding: 8px 12px;
  background: #fdf6e8;
  border: 1px solid #e6d3a8;
  color: #7a5a17;
  font-size: 12.5px;
  line-height: 1.4;
}

/* ---------- Tablero del panel ---------- */
.pres-tablero {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 20px 22px;
  margin-bottom: 28px;
}
.pres-tablero-head h3 {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wine);
}
.pres-tablero-head p { margin: 0 0 14px; font-size: 13.5px; color: var(--stone); max-width: 70ch; }
.pres-lista { display: flex; flex-wrap: wrap; gap: 12px; }
.pres-nadie { margin: 0; font-size: 14px; color: var(--stone); }
.pres-agente {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 15px 10px 11px;
  border: 1px solid var(--line-strong);
  background: var(--ivory);
}
.pres-agente img,
.pres-inicial {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.pres-inicial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wine);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 18px;
}
.pres-nombre { font-weight: 600; font-size: 14.5px; }
.pres-rol { font-size: 12.5px; color: var(--stone); }
.pres-punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success);
  margin-left: 6px;
  flex: none;
  animation: presLatido 2.4s ease-in-out infinite;
}

@media (max-width: 720px) {
  .pres-sw .pres-txt { display: none; }
  .pres-sw { padding: 8px 11px; }
  .pres-agente { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pres-sw.on .pres-luz, .pres-punto { animation: none; }
}


/* ==========================================================================
   CHAT EN VIVO — lado del visitante
   El botón va ARRIBA de Fabi, que a su vez está arriba del de WhatsApp.
   Solo aparece cuando hay un agente disponible de verdad.
   ========================================================================== */
#cv-btn {
  position: fixed;
  right: 14px;
  bottom: 204px;
  z-index: 9997;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px 11px 13px;
  border: none;
  border-radius: 30px;
  background: var(--wine);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(89, 0, 0, 0.3);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  animation: cvAparecer 0.4s cubic-bezier(.34, 1.3, .64, 1);
}
@keyframes cvAparecer {
  from { opacity: 0; transform: translateY(12px) scale(.9); }
  to   { opacity: 1; transform: none; }
}
#cv-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(89,0,0,.38); }
#cv-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
#cv-btn.abierto { opacity: 0; pointer-events: none; }
/* Charla en curso: el visitante cambió de página y la conversación sigue viva.
   Se marca distinto para que no parezca que hay que empezar de nuevo. */
#cv-btn.en-curso { background: var(--charcoal); }
#cv-btn.en-curso .cv-btn-punto { background: var(--gold); }
.cv-btn-ico { display: inline-flex; }
.cv-btn-ico svg { width: 20px; height: 20px; }
.cv-btn-punto {
  width: 9px; height: 9px; border-radius: 50%;
  background: #4ade80; flex: none;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
  animation: cvLatir 2.2s ease-in-out infinite;
}
@keyframes cvLatir {
  0%, 100% { box-shadow: 0 0 0 3px rgba(74,222,128,.25); }
  50%      { box-shadow: 0 0 0 6px rgba(74,222,128,.08); }
}

#cv-panel {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 9999;
  width: 340px;
  max-width: calc(100vw - 28px);
  max-height: min(560px, calc(100vh - 28px));
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.24);
  animation: cvAparecer 0.24s ease;
}
.cv-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  background: var(--wine);
  color: var(--paper);
  flex: none;
}
.cv-head-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cv-head-txt strong { font-size: 15px; }
.cv-head-txt span { font-size: 12px; opacity: 0.85; }
#cv-cerrar {
  background: none; border: none; color: inherit;
  font-size: 24px; line-height: 1; cursor: pointer; padding: 0 2px; opacity: .85;
}
#cv-cerrar:hover { opacity: 1; }
.cv-cuerpo { padding: 14px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; }

.cv-agentes { display: flex; flex-direction: column; gap: 8px; }
.cv-agente {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--ivory); font-family: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.cv-agente:hover { border-color: var(--wine); background: #f3ece2; }
.cv-agente img, .cv-inicial {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none;
}
.cv-inicial {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wine); color: var(--paper); font-family: var(--font-display); font-size: 18px;
}
.cv-agente-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cv-agente-nombre { font-weight: 600; font-size: 14.5px; color: var(--charcoal); }
.cv-agente-rol { font-size: 12px; color: var(--stone); }
.cv-mat {
  margin-left: 6px; padding: 0 5px; font-family: var(--font-mono); font-size: 9.5px;
  color: var(--wine); background: var(--paper); border: 1px solid var(--line-strong);
}
.cv-libre {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--success); flex: none;
}

.cv-form { display: flex; flex-direction: column; gap: 5px; }
.cv-form label { font-size: 13px; color: var(--stone); margin-top: 6px; }
.cv-opc { color: var(--stone-light); }
.cv-form input {
  padding: 10px 12px; border: 1px solid var(--line-strong);
  background: var(--paper); font-family: inherit; font-size: 15px; color: var(--charcoal);
}
.cv-form input:focus { outline: none; border-color: var(--wine); }
.cv-primario {
  margin-top: 12px; padding: 12px 16px; border: none; background: var(--wine);
  color: var(--paper); font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.cv-primario:hover { background: var(--wine-dark); }
.cv-link {
  background: none; border: none; padding: 6px 0; color: var(--wine);
  font-family: inherit; font-size: 13.5px; cursor: pointer; text-decoration: underline;
}
.cv-nota { margin: 14px 0 0; font-size: 13px; color: var(--stone); line-height: 1.5; }
.cv-vacio { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--stone); }
.cv-esperando { font-size: 14px; color: var(--stone); text-align: center; padding: 20px 0; }
.cv-error { font-size: 14px; color: var(--wine); line-height: 1.5; }

.cv-msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 180px; }
.cv-msg {
  max-width: 86%; padding: 9px 13px; font-size: 14.5px; line-height: 1.5;
  overflow-wrap: anywhere;
}
.cv-msg.mio { align-self: flex-end; background: var(--wine); color: var(--paper); }
.cv-msg.suyo { align-self: flex-start; background: var(--ivory); border: 1px solid var(--line); }

.cv-avisos:empty { display: none; }
.cv-aviso {
  margin-top: 10px; padding: 11px 13px; background: #fdf6e8;
  border: 1px solid #e6d3a8; color: #7a5a17; font-size: 13px; line-height: 1.5;
}
.cv-aviso p { margin: 0 0 8px; }
.cv-opciones { display: flex; gap: 6px; flex-wrap: wrap; }
.cv-chico {
  padding: 7px 11px; border: 1px solid #d8c193; background: var(--paper);
  color: #7a5a17; font-family: inherit; font-size: 12.5px; cursor: pointer;
}
.cv-chico:hover { background: #fbf2e0; }
.cv-chiquito { margin: 8px 0 0 !important; font-size: 11.5px; opacity: .85; }

.cv-enviar { display: flex; gap: 7px; align-items: flex-end; margin-top: 10px; flex: none; }
.cv-enviar textarea {
  flex: 1; resize: none; padding: 10px 12px; border: 1px solid var(--line-strong);
  background: var(--paper); font-family: inherit; font-size: 14.5px; line-height: 1.4;
  max-height: 90px; color: var(--charcoal);
}
.cv-enviar textarea:focus { outline: none; border-color: var(--wine); }
.cv-enviar button {
  flex: none; width: 42px; height: 42px; border: none; background: var(--wine);
  color: var(--paper); font-size: 16px; cursor: pointer;
}
.cv-enviar button:hover { background: var(--wine-dark); }

@media (max-width: 560px) {
  #cv-btn { bottom: 176px; right: 8px; padding: 10px 14px 10px 11px; font-size: 13px; }
  #cv-panel { right: 8px; left: 8px; bottom: 8px; width: auto; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  #cv-btn, .cv-btn-punto, #cv-panel { animation: none; }
  #cv-btn:hover { transform: none; }
}
@media print { #cv-btn, #cv-panel { display: none !important; } }

/* ==========================================================================
   CHAT EN VIVO — lado del agente (dentro del panel)
   ========================================================================== */
.cva-tab {
  position: fixed; right: 18px; bottom: 18px; z-index: 9997;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 16px; border: none; border-radius: 30px;
  background: var(--charcoal); color: var(--paper);
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.cva-tab.llamando {
  background: var(--wine);
  animation: cvaLlamando 1.1s ease-in-out infinite;
}
@keyframes cvaLlamando {
  0%, 100% { box-shadow: 0 6px 18px rgba(89,0,0,.35); }
  50%      { box-shadow: 0 6px 26px rgba(89,0,0,.75); }
}
.cva-badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--paper); color: var(--wine);
  font-size: 12px; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center;
}
.cva-panel {
  position: fixed; right: 18px; bottom: 18px; z-index: 9998;
  width: 330px; max-width: calc(100vw - 36px);
  max-height: min(540px, calc(100vh - 36px));
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line-strong);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.26);
}
.cva-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 15px; background: var(--charcoal); color: var(--paper); flex: none;
}
.cva-head strong { font-size: 14.5px; }
#cva-cerrar { background: none; border: none; color: inherit; font-size: 23px; cursor: pointer; opacity: .85; }
.cva-cuerpo { padding: 12px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; }
.cva-vacio { margin: 6px 0 12px; font-size: 13.5px; color: var(--stone); }
.cva-fila {
  display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left;
  padding: 10px 12px; margin-bottom: 6px; cursor: pointer;
  border: 1px solid var(--line); background: var(--ivory); font-family: inherit;
}
.cva-fila:hover { border-color: var(--wine); }
.cva-fila.nuevo { border-left: 3px solid var(--wine); background: #fbf1f1; }
.cva-fila-nom { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cva-pill {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--paper); background: var(--wine); padding: 1px 7px;
}
.cva-fila-sub { font-size: 12px; color: var(--stone); }
.cva-datos { font-size: 12.5px; color: var(--stone); padding-bottom: 9px; border-bottom: 1px solid var(--line); margin-bottom: 9px; }
.cva-datos a { color: var(--wine); }
.cva-sin { color: var(--stone-light); font-style: italic; }
.cva-msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; min-height: 170px; }
.cva-msg { max-width: 88%; padding: 8px 12px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.cva-msg.mio { align-self: flex-end; background: var(--charcoal); color: var(--paper); }
.cva-msg.suyo { align-self: flex-start; background: var(--ivory); border: 1px solid var(--line); }
.cva-enviar { display: flex; gap: 6px; align-items: flex-end; margin-top: 9px; flex: none; }
.cva-enviar textarea {
  flex: 1; resize: none; padding: 9px 11px; border: 1px solid var(--line-strong);
  background: var(--paper); font-family: inherit; font-size: 14px; max-height: 80px;
}
.cva-enviar textarea:focus { outline: none; border-color: var(--wine); }
.cva-enviar button {
  flex: none; width: 40px; height: 40px; border: none;
  background: var(--charcoal); color: var(--paper); cursor: pointer;
}
.cva-pie { display: flex; justify-content: space-between; margin-top: 8px; gap: 6px; flex-wrap: wrap; align-items: center; }
.cva-pie .cva-link { font-size: 11.5px; }
.cva-link { background: none; border: none; color: var(--wine); font-family: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline; }
.cva-sonido {
  display: flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 11px;
  border-top: 1px solid var(--line); font-size: 12.5px; color: var(--stone);
}
.cva-sonido select {
  padding: 5px 8px; border: 1px solid var(--line-strong); background: var(--paper);
  font-family: inherit; font-size: 12.5px; cursor: pointer;
}
.cva-probar {
  padding: 5px 10px; border: 1px solid var(--line-strong); background: var(--paper);
  font-family: inherit; font-size: 12.5px; cursor: pointer;
}
.cva-probar:hover { border-color: var(--wine); }
@media (max-width: 560px) {
  .cva-panel { right: 8px; left: 8px; bottom: 8px; width: auto; max-width: none; }
}

/* 20/09/2026 — "Hablar con Fabi" es un panel APARTE, a un costado del
   chat con el cliente, para que se puedan ver los dos juntos (antes
   reemplazaba la vista del chat y la tapaba). En pantallas angostas no
   entran los dos lado a lado, así que el de Fabi se ubica arriba, pegado
   al techo, sin pisar el del chat que sigue abajo. */
/* 02/10/2026 — Fabi está SIEMPRE (a pedido de Flavio): sin chat abierto va
   arriba del botón "Chat en vivo"; con el chat abierto, a su costado.
   Con "–" se achica a una barrita. */
.cva-fabi-panel {
  right: 18px;
  bottom: 74px;
  width: 320px;
  max-height: min(470px, calc(100vh - 100px));
}
#cva-caja.cva-con-chat .cva-fabi-panel {
  right: calc(18px + 330px + 12px);
  bottom: 18px;
}
.cva-fabi-cuerpo { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 10px 12px 12px; }
.cva-fabi-cuerpo .cva-msgs { min-height: 110px; }
.cva-fabi-panel .cva-head strong { cursor: pointer; }
.cva-fabi-min { background: none; border: none; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; opacity: .85; padding: 0 2px; }
.cva-fabi-min:hover { opacity: 1; }
.cva-fabi-panel.achicada { width: 220px; max-height: none; }
.cva-fabi-panel.achicada .cva-fabi-cuerpo,
.cva-fabi-panel.achicada #cva-fabi-mapa,
.cva-fabi-panel.achicada #cva-fabi-nueva { display: none; }
.cva-fabi-panel.achicada .cva-head { padding: 9px 13px; }
#cva-fabi-nueva[hidden] { display: none; }
@media (max-width: 900px) {
  .cva-fabi-panel,
  #cva-caja.cva-con-chat .cva-fabi-panel {
    right: 8px; left: 8px; width: auto; max-width: none;
    top: 12px; bottom: auto;
    max-height: min(48vh, 420px);
  }
  /* Achicada en el celular: una pastillita abajo a la izquierda (el botón
     del chat en vivo está a la derecha). */
  .cva-fabi-panel.achicada,
  #cva-caja.cva-con-chat .cva-fabi-panel.achicada {
    top: auto; bottom: 18px; left: 12px; right: auto; width: auto;
    border-radius: 22px; overflow: hidden;
  }
}
@media print { .cva-fabi-panel { display: none !important; } }
@media print { .cva-tab, .cva-panel { display: none !important; } }

/* Sin esto, el atributo hidden no alcanza: la regla de display de arriba le
   gana a la del navegador y el botón se ve igual aunque esté "oculto". */
#cv-btn[hidden], #cv-panel[hidden],
.cva-tab[hidden], .cva-panel[hidden], .cva-mirando[hidden], .cva-mandar[hidden],
.cva-badge[hidden], .cv-enviar[hidden] { display: none !important; }

/* ==========================================================================
   CHAT DEL AGENTE: por dónde anda el cliente y cómo mandarle una propiedad
   ========================================================================== */

/* ---------- "Está mirando FB-12" (se actualiza solo) ---------- */
.cva-mirando {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  margin-bottom: 9px;
  background: #f6f2e9;
  border: 1px solid #e2d8c2;
  border-left: 3px solid var(--gold);
  font-size: 12.5px;
  color: var(--charcoal);
}
.cva-mirando-ojo { color: var(--gold); font-size: 10px; animation: cvaLatido 2s ease-in-out infinite; }
@keyframes cvaLatido { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.cva-mirando-txt { flex: 1; min-width: 130px; line-height: 1.4; overflow-wrap: anywhere; }

/* ---------- Botoncito "ver esta propiedad" ---------- */
.cva-propbtn {
  display: block;
  margin-top: 7px;
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--charcoal);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
}
.cva-propbtn:hover { border-color: var(--wine); color: var(--wine); }
.cva-mirando .cva-propbtn, .cva-res-fila .cva-propbtn { margin-top: 0; flex: none; }
.cva-msg.mio .cva-propbtn { background: transparent; color: var(--paper); border-color: rgba(255,255,255,.35); }
.cva-msg.mio .cva-propbtn:hover { background: var(--paper); color: var(--charcoal); }
.cva-propbtn.manda { background: var(--charcoal); color: var(--paper); border-color: var(--charcoal); }
.cva-propbtn.manda:hover { background: var(--wine); border-color: var(--wine); color: var(--paper); }

/* ---------- Buscador para mandarle una propiedad ---------- */
.cva-mandar {
  margin-top: 9px;
  padding: 10px;
  border: 1px solid var(--line-strong);
  background: var(--ivory);
  flex: none;
}
.cva-mandar input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  font-family: inherit;
  font-size: 13.5px;
}
.cva-mandar input:focus { outline: none; border-color: var(--wine); }
.cva-result { margin-top: 8px; max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.cva-res-fila {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  background: var(--paper);
  border: 1px solid var(--line);
  flex-wrap: wrap;
}
.cva-res-txt { flex: 1 1 130px; font-size: 12.5px; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.cva-res-sub { display: block; color: var(--stone); font-size: 11.5px; margin-top: 2px; }
.cva-res-ojo { color: var(--wine); font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; }
/* Miniatura y titular: solo en el panel interno de Fabi, para que el agente
   identifique la ficha de un vistazo. El titular NUNCA sale al cliente. */
.cva-res-foto { width: 38px; height: 38px; object-fit: cover; border-radius: 4px; flex: none; background: var(--line); }
.cva-res-titular { display: block; color: var(--wine-dark); font-size: 11px; margin-top: 2px; font-style: italic; }

/* Botón "📍 Mapa" en la cabecera del panel de Fabi */
.cva-fabi-panel .cva-head { gap: 8px; }
.cva-fabi-mapa-btn {
  margin-left: auto;
  background: none;
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  border-radius: 6px;
  font-size: 11px;
  padding: 4px 8px;
  cursor: pointer;
}
.cva-fabi-mapa-btn:hover { background: rgba(255,255,255,.15); }
.cva-fabi-mapa-btn:disabled { opacity: .5; cursor: default; }

/* ---------- "Hablar con Fabi" (19/09/2026) — privado, no lo ve el cliente ---------- */
.cva-fabi-aviso {
  font-size: 11.5px;
  color: var(--charcoal);
  padding: 6px 9px;
  margin-bottom: 9px;
  background: #f6f2e9;
  border-left: 3px solid var(--gold);
}
.cva-fabi-accion {
  margin-top: 7px;
  padding: 5px 9px;
  font-size: 11.5px;
  background: #eef6ee;
  border: 1px solid #c7e2c7;
  color: #2b6a2b;
}
.cva-msg .cva-result { margin-top: 7px; }
.cva-propbtn.insertado { color: #2b6a2b; border-color: #c7e2c7; cursor: default; }
.cva-propbtn.insertado:hover { border-color: #c7e2c7; color: #2b6a2b; }

/* Los links que manda el agente, del lado del visitante */
.cv-msg a { color: inherit; text-decoration: underline; overflow-wrap: anywhere; }
.cv-msg.suyo a { color: var(--wine); }

/* ---------- Acceso de un agente: activo / desactivado ---------- */
.eq-activo {
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--wine);
  background: var(--ivory);
  padding: 14px 18px;
}
.eq-sw { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.eq-sw input { width: 19px; height: 19px; accent-color: var(--wine); cursor: pointer; }
.eq-ojo {
  margin-top: 10px !important;
  padding: 10px 13px;
  background: #fdf6e8;
  border: 1px solid #e6d3a8;
  color: #7a5a17 !important;
  line-height: 1.5;
}
.eq-ojo a { color: #7a5a17; }
.admin-table tr.fila-inactiva { opacity: 0.55; }
.admin-table tr.fila-inactiva:hover { opacity: 1; }
#aviso-inactivos[hidden] { display: none !important; }

/* ==========================================================================
   PIE: acceso al panel y espacio para los botones flotantes
   --------------------------------------------------------------------------
   En el celular hay hasta tres burbujas fijas en el rincón de abajo a la
   derecha (WhatsApp, Fabi y el chat en vivo). Antes tapaban el enlace al
   panel interno y no se podía tocar. Ahora el enlace va a la IZQUIERDA y el
   pie deja lugar libre debajo para que ninguna burbuja se le encime.
   ========================================================================== */
.footer-bottom { flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.footer-bottom .pie-panel { order: -1; margin-right: auto; }
.footer-bottom .pie-panel a { color: inherit; text-decoration: underline; }
.footer-bottom .pie-copy { order: 3; }
.footer-bottom .legal-links { order: 2; }

@media (max-width: 760px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    /* Espacio libre para que las burbujas no tapen NADA del pie.
       La burbuja más alta (el chat en vivo) llega hasta unos 220 px desde el
       borde de abajo; con este aire, todo el texto del pie queda arriba de esa
       zona y se puede tocar sin pelear con nada.
       (Se agrandó a 300 px cuando los enlaces legales pasaron a ser más altos
       para poder tocarlos con el dedo: si no, el último quedaba abajo de la
       burbuja del chat en pantallas de 360 px.) */
    padding-bottom: 300px;
  }
  .footer-bottom .pie-panel { margin-right: 0; }
  /* Los links legales, uno abajo del otro y pegados a la izquierda: así
     ninguno se estira hasta el rincón donde están las burbujas. */
  .footer-bottom .legal-links { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-bottom .legal-links .sep { display: none; }
  .footer-bottom .legal-links a { padding: 3px 0; }
  /* El acceso al panel, más grande y separado: se toca con el dedo. */
  .footer-bottom .pie-panel a {
    display: inline-block;
    padding: 9px 14px;
    border: 1px solid rgba(255,255,255,0.22);
    text-decoration: none;
    font-size: 12px;
  }
  .footer-bottom .legal-links { gap: 6px 10px; }
}

/* ==========================================================================
   PUBLICAR SÍ / NO  +  DOCUMENTOS INTERNOS DE LA PROPIEDAD
   --------------------------------------------------------------------------
   Dos cosas nuevas en la ficha de propiedad del panel:
   1) el interruptor "Publicar en el sitio" (para las que el propietario no
      autoriza a mostrar y quedan solo en carpeta);
   2) la lista de documentos internos (planos, plancheta, informe técnico).
   ========================================================================== */

/* ---------- Interruptor de publicación ---------- */
.pub-caja {
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--gold);
  background: #fdfaf4;
  padding: 14px 16px;
}
.pub-sw {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
}
.pub-sw input { width: 19px; height: 19px; accent-color: var(--wine); cursor: pointer; }
/* Cuando está destildado, la caja se pone en tono "ojo, esto no se ve" */
.pub-caja:has(input:not(:checked)) { border-left-color: var(--wine); background: #fbf4f4; }

/* ---------- Lista de documentos internos ---------- */
.docs-lista { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.docs-vacio { margin: 0; font-size: 13px; color: var(--stone); font-style: italic; }
.doc-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  flex-wrap: wrap;
}
.doc-ico {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  padding: 4px 7px;
  border: 1px solid var(--line-strong);
  color: var(--charcoal);
  background: #f4f1ec;
}
.doc-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 180px; }
.doc-nombre {
  font-size: 14px;
  color: var(--charcoal);
  /* Los nombres de archivo suelen ser largos: que corten y no empujen la fila */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.doc-meta { font-size: 12px; color: var(--stone); }
.doc-fila .btn-inline {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
  color: var(--charcoal);
}
.doc-fila .btn-inline:hover { border-color: var(--wine); color: var(--wine); }
.doc-fila .btn-inline.danger:hover { background: var(--wine); border-color: var(--wine); color: var(--paper); }
.doc-fila .btn-inline[disabled] { opacity: 0.55; cursor: default; }

@media (max-width: 640px) {
  .doc-fila { align-items: flex-start; }
  .doc-txt { flex-basis: 100%; }
}

/* ==========================================================================
   FICHA RÁPIDA INTERNA (ventana emergente del panel)
   --------------------------------------------------------------------------
   La usa el agente cuando está por teléfono con un cliente: todos los datos
   de una propiedad, las fotos, los videos y lo reservado, en una sola
   pantalla y sin salir de donde estaba.
   ========================================================================== */
#fr-fondo {
  position: fixed;
  inset: 0;
  /* ⚠️ POR ARRIBA DE .fb-modal (4200). La ficha rápida se abre DESDE adentro
     de la ventana de la charla y de la de seguimiento: con 4000 quedaba
     detrás y para el agente el botón "no hacía nada".
     (Revisión independiente del 03/09/2026.) */
  z-index: 4400;
  background: rgba(20, 18, 16, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
#fr-fondo[hidden] { display: none !important; }
body.fr-abierta { overflow: hidden; }

.fr-caja {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  width: min(880px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.32);
}
.fr-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--charcoal);
  color: var(--paper);
  flex: none;
}
.fr-head-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.fr-cod {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--gold);
}
.fr-head strong { font-size: 17px; line-height: 1.3; font-weight: 600; }
#fr-cerrar {
  flex: none;
  background: transparent;
  border: 0;
  color: var(--paper);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.8;
}
#fr-cerrar:hover { opacity: 1; }

.fr-cuerpo { overflow-y: auto; padding: 18px; }

.fr-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.fr-acciones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.fr-acciones .btn-inline {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 13px;
  border: 1px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
  color: var(--charcoal);
  text-decoration: none;
  display: inline-block;
}
.fr-acciones .btn-inline:hover { border-color: var(--wine); color: var(--wine); }

.fr-sec { padding: 16px 0; border-bottom: 1px solid var(--line); }
.fr-sec:last-child { border-bottom: 0; }
.fr-sec h4 {
  margin: 0 0 11px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--stone);
}
/* Lo reservado, en caja aparte y con borde vino: se ve de una que no se publica */
.fr-sec.fr-privada {
  background: #f9f4f4;
  border: 1px solid #e3d0d0;
  border-left: 4px solid var(--wine);
  padding: 15px 16px;
  margin-top: 16px;
}
.fr-sec.fr-privada h4 { color: var(--wine); }

.fr-tabla { display: flex; flex-direction: column; }
.fr-fila {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px dotted var(--line);
  font-size: 14.5px;
}
.fr-fila:last-child { border-bottom: 0; }
.fr-k { flex: 0 0 40%; color: var(--stone); font-size: 13.5px; }
.fr-v { flex: 1; color: var(--charcoal); overflow-wrap: anywhere; }
.fr-fila.fr-destacada .fr-v { font-weight: 700; font-size: 17px; }
.fr-fila.fr-tapada { background: #fdfaf0; }
.fr-notag {
  display: inline-block;
  margin-left: 7px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a6a1c;
  background: #f6ecd2;
  border: 1px solid #e6d3a8;
  padding: 1px 5px;
}
.fr-grupo { margin-bottom: 14px; }
.fr-grupo:last-child { margin-bottom: 0; }
.fr-grupo h5 {
  margin: 0 0 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--charcoal);
  text-transform: none;
  letter-spacing: 0;
}

.fr-desc { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--charcoal); }
.fr-lista { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.7; }
.fr-videos { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.7; }
.fr-videos a { color: var(--wine); overflow-wrap: anywhere; }
.fr-nada { margin: 0; font-size: 13.5px; color: var(--stone); font-style: italic; }
.fr-chiquito { margin: 8px 0 0; font-size: 12px; color: var(--stone); }

.fr-foto-grande { background: #ece8e1; }
.fr-foto-grande img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: contain; }
.fr-tiras { display: flex; gap: 7px; margin-top: 8px; overflow-x: auto; padding-bottom: 4px; }
.fr-tira {
  flex: none;
  width: 74px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  background: #ece8e1;
  cursor: pointer;
  overflow: hidden;
}
.fr-tira img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fr-tira.activa { border-color: var(--wine); }

.fr-docs { display: flex; flex-direction: column; gap: 8px; }
.fr-doc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  flex-wrap: wrap;
}
.fr-doc .btn-inline {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
  color: var(--charcoal);
}
.fr-doc .btn-inline:hover { border-color: var(--wine); color: var(--wine); }
.fr-doc .btn-inline[disabled] { opacity: 0.55; cursor: default; }

@media (max-width: 620px) {
  #fr-fondo { padding: 0; }
  .fr-caja { width: 100%; height: 100%; max-height: 100%; }
  .fr-k { flex-basis: 46%; }
  .fr-fila { font-size: 14px; }
}

/* Aviso de lo que el resguardo NO puede guardar (fotos y PDF). */
.backup-note.backup-ojo {
  border-left: 4px solid var(--gold);
  background: #fdf8ee;
}
.backup-note.backup-ojo h4 { color: #7a5a17; }

/* ==========================================================================
   QUE NADA SE PASE DE ANCHO EN EL CELULAR
   --------------------------------------------------------------------------
   Cuando una caja está adentro de una grilla o de una fila flexible, el
   navegador por omisión NO la deja achicarse más allá de su contenido: si
   adentro hay una tabla ancha o un texto largo, la caja crece y empuja toda
   la página, y aparece la barra para deslizar de costado. Con min-width: 0
   la caja sí se puede achicar y el contenido se acomoda (o se desliza solo
   adentro de su propia cajita, como las tablas del panel).
   ========================================================================== */
.branch-grid > *,
.stats-two > *,
.stats-block,
.admin-table-wrap,
.config-layout > *,
.cx-rejilla > *,
.ficha-extras > * { min-width: 0; }

/* Los datos de la sucursal: que el texto largo corte en vez de estirar */
.branch-row { min-width: 0; }
.branch-row > span:not(.k) { min-width: 0; overflow-wrap: anywhere; }
.branch-card .matricula { overflow-wrap: anywhere; }

@media (max-width: 520px) {
  /* En pantallas angostas la etiqueta va arriba y el dato abajo: así entra
     un mail largo o un horario completo sin romper nada. */
  .branch-row { flex-direction: column; gap: 3px; }
  .branch-row .k { width: auto; }
}

/* ==========================================================================
   CELULAR: BOTONES Y LINKS QUE SE PUEDAN TOCAR CON EL DEDO
   --------------------------------------------------------------------------
   Los links del pie medían 16 px de alto. Con el dedo eso es una lotería.
   Se les da altura mínima sin cambiar nada de cómo se ven en la computadora.
   ========================================================================== */
@media (max-width: 760px) {
  .footer-grid ul li { margin-bottom: 2px; }
  .footer-grid ul li a {
    display: inline-block;
    padding: 7px 0;
    min-height: 30px;
    line-height: 1.35;
  }
  .news-toggle {
    min-height: 34px;
    padding: 7px 0;
  }
  /* inline-block y NO inline-flex: con flex el texto largo deja de cortarse
     en dos renglones, el enlace se estira a lo ancho y se le va abajo de la
     burbuja del chat en pantallas de 360 px. */
  .legal-links a { display: inline-block; padding: 7px 0; }
}

/* ==========================================================================
   MANUAL DEL AGENTE
   ========================================================================== */
.admin-card-ayuda { border-left: 4px solid var(--gold); }

.man-descargas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.man-caja {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.man-caja:hover { border-color: var(--wine); box-shadow: 0 10px 24px rgba(36,29,26,0.08); }
.man-tipo {
  flex: none;
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wine);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.man-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.man-txt strong { font-size: 16px; color: var(--charcoal); }
.man-txt span { font-size: 13.5px; color: var(--stone); line-height: 1.45; }

.man-rapido { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.man-item {
  padding: 16px 18px;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  min-width: 0;
}
.man-item h4 { font-size: 15px; margin: 0 0 6px; color: var(--wine-dark); }
.man-item p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--charcoal); }

@media (max-width: 780px) {
  .man-descargas, .man-rapido { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CAJA DE FILTROS DEL LISTADO
   --------------------------------------------------------------------------
   Los filtros cambian según la categoría (ver filtros.js), así que la caja
   tiene que soportar tres filtros o siete sin verse rota. Por eso es una
   rejilla que acomoda sola las columnas que entren.
   ========================================================================== */
.filtros-caja {
  border: 1px solid var(--line-strong);
  border-top: none; /* junto con el border-bottom:none de .filtros-chips (más abajo), entre
    los dos dejan la unión sin ninguna línea — se ven como una sola caja */
  background: var(--paper);
  margin-bottom: 34px;
}

/* La fila de categorías (22/09/2026: separada de `.filtros-caja` para que
   pueda vivir sola dentro de lo anclado — ver comentario en propiedades.html
   sobre por qué se separó del resto de los filtros). Es la decisión más
   importante que toma el visitante y de ella depende todo lo demás, por eso
   sigue siendo lo único que queda fijo al scrollear. */
.filtros-chips {
  border: 1px solid var(--line-strong);
  border-bottom: none; /* junto con el border-top:none de .filtros-caja (arriba), entre los
    dos dejan la unión sin ninguna línea — se ven como una sola caja */
  background: var(--ivory);
}
.filtros-chips .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 18px;
  margin: 0;
  border-bottom: none; /* pisa el border-bottom de la regla base .filter-bar (arriba en el
    archivo) — si no, esa línea vieja quedaba dibujada justo en la unión con .filtros-caja */
}

.filtros-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 14px 18px;
  padding: 18px;
}
.filtros-rejilla:empty { display: none; }
/* Si abajo vienen las comodidades, la rejilla no deja tanto aire */
.filtros-rejilla:has(+ .filtros-comodidades:not([hidden])) { padding-bottom: 14px; }

.filtro { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filtro-tit {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.filtro select,
.filtro input[type="number"] {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--charcoal);
  min-width: 0;
}
.filtro select:focus,
.filtro input:focus { outline: none; border-color: var(--wine); }
.filtro-par { display: flex; gap: 8px; }
.filtro-par input { flex: 1 1 0; min-width: 0; }
.filtro-par select.filtro-moneda { flex: 0 0 auto; width: auto; padding-right: 6px; }  /* 27/09/2026: U$S o $ */

/* Los de "sí o no" van con tilde, alineados con el resto de la rejilla. */
.filtro-check {
  flex-direction: row;
  align-items: center;
  gap: 9px;
  align-self: end;
  padding-bottom: 9px;
  font-size: 14px;
  color: var(--charcoal);
  cursor: pointer;
}
.filtro-check input { width: 18px; height: 18px; accent-color: var(--wine); cursor: pointer; flex: none; }

.filtros-pie {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 13px 18px;
  border-top: 1px solid var(--line);
  background: var(--ivory);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--stone);
}
.filtro-tilde, .filtro-orden { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.filtro-tilde input { width: 17px; height: 17px; accent-color: var(--wine); cursor: pointer; }
.filtros-pie select {
  padding: 6px 9px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--charcoal);
  cursor: pointer;
}
.filtros-limpiar {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--charcoal);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 7px 12px;
  cursor: pointer;
}
.filtros-limpiar:hover { border-color: var(--wine); color: var(--wine); }
.filtros-limpiar[hidden] { display: none !important; }
.filtros-pie .filter-count { margin-left: auto; color: var(--charcoal); }

/* ---------- El mapa como herramienta destacada (21/09/2026) ----------
   Antes los 2 botones del mapa iban chicos, adentro de la caja de filtros.
   A pedido de Flavio ahora van primero (arriba del título "Todas las
   propiedades"), centrados y más grandes — y esta franja queda anclada
   (`position: sticky`) debajo del header al scrollear la grilla, para no
   tener que volver arriba para cambiar de categoría o abrir el mapa. Solo
   en pantallas grandes (ver media query al final): en celular/tablet no
   hay lugar de sobra para fijar tanto contenido sin tapar la pantalla, así
   que ahí se scrollea normal, como cualquier otra página.

   22/09/2026 — CORREGIDO: el detalle de filtros (`.filtros-caja`, ver más
   abajo) se sacó de acá adentro y quedó afuera, en flujo normal. Antes
   estaba adentro y, al elegir una categoría, los campos nuevos hacían
   crecer esta franja anclada más alto que la pantalla — tapaba todo y no
   se llegaba a ver el detalle. Ahora acá adentro solo queda lo de altura
   fija (mapa + título + categorías). */
.propiedades-toolbar {
  background: var(--ivory);
}
@media (min-width: 981px) {
  .propiedades-toolbar {
    position: sticky;
    top: 88px; /* alto de .site-header en escritorio */
    z-index: 90;
    /* Antes (cuando el detalle de filtros todavía vivía acá adentro) tenía
       padding-bottom + border-bottom para cerrar la caja completa. Ya no:
       eso dejaba una línea/hueco justo en la unión con .filtros-chips y
       .filtros-caja, arruinando el "se ven como una sola caja" de arriba. */
  }
}

.mapa-destacado {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 4px 0 22px;
  text-align: center;
}
.mapa-destacado-btn {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--wine-dark);
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.03em;
  padding: 13px 22px;
  cursor: pointer;
}
.mapa-destacado-btn:hover { border-color: var(--wine); color: var(--wine); }
.mapa-destacado-btn-principal {
  background: var(--wine);
  border-color: var(--wine);
  color: #fff;
}
.mapa-destacado-btn-principal:hover { background: var(--wine-dark); border-color: var(--wine-dark); color: #fff; }
.filtro-radio-activo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--charcoal);
  background: #f6f2e9;
  border: 1px solid #e2d8c2;
  border-left: 3px solid var(--gold);
  padding: 6px 10px;
}
.filtro-radio-activo[hidden] { display: none !important; }
.filtro-radio-activo button {
  background: none;
  border: none;
  color: var(--stone);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.filtro-radio-activo button:hover { color: var(--wine); }
@media (max-width: 700px) {
  .propiedades-toolbar { top: 74px; } /* .site-header baja a 74px en celular (ver arriba) — sin efecto ahí porque no es sticky, queda por las dudas si algún día cambia el breakpoint */
  .mapa-destacado { padding: 0 0 18px; gap: 10px; }
  .mapa-destacado-btn { padding: 11px 16px; font-size: 12.5px; }
}

/* ---------- Cuando no queda ninguna ---------- */
.sin-resultados {
  grid-column: 1 / -1;
  text-align: center;
  padding: 54px 20px;
  border: 1px dashed var(--line-strong);
  background: var(--ivory);
}
.sin-resultados .sin-tit {
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--wine-dark);
  margin-bottom: 8px;
}
.sin-resultados p { color: var(--stone); max-width: 46ch; margin: 0 auto; line-height: 1.6; }
.sin-botones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

@media (max-width: 620px) {
  .filtros-rejilla { grid-template-columns: 1fr 1fr; padding: 14px; gap: 12px 14px; }
  .filtros-chips .filter-bar { padding: 13px 14px; gap: 6px; }
  .filtros-pie { padding: 12px 14px; gap: 12px; }
  .filtros-pie .filter-count { margin-left: 0; flex-basis: 100%; }
  .filtro-precio { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .filtros-rejilla { grid-template-columns: 1fr; }
}

/* ---------- Fila de comodidades (cochera, quincho, pileta...) ---------- */
.filtros-comodidades {
  display: flex;
  align-items: center;
  gap: 8px 20px;
  flex-wrap: wrap;
  padding: 0 18px 18px;
}
.filtros-comodidades[hidden] { display: none !important; }
.comod-tit {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  flex: none;
}
.comod {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--charcoal);
  cursor: pointer;
  padding: 4px 0;
}
.comod input { width: 17px; height: 17px; accent-color: var(--wine); cursor: pointer; flex: none; }
.comod:hover { color: var(--wine); }

@media (max-width: 620px) {
  .filtros-comodidades { padding: 0 14px 14px; gap: 6px 16px; }
  .comod-tit { flex-basis: 100%; }
}

/* ---------- Acceso al panel: los que esperan habilitación ---------- */
.acc-espera {
  border: 1px solid #e6d3a8;
  border-left: 4px solid var(--gold);
  background: #fdf8ee;
  padding: 16px 18px;
}
.acc-espera h4 {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a5a17;
}
.acc-espera-fila {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px dotted #e6d3a8;
}
.acc-espera-fila:first-of-type { border-top: 0; }
.acc-espera-fila > span:first-child { flex: 1 1 220px; min-width: 0; }
.acc-espera-fila .cell-sub { display: block; }

/* ==========================================================================
   FICHA: CONSULTAR Y COMPARTIR, ARRIBA Y BIEN SEPARADOS
   --------------------------------------------------------------------------
   Dos bloques con intención distinta:

     CONSULTAR  (borde vino, botón principal lleno) -> "quiero hablar con la
                inmobiliaria". Es la acción que nos importa, así que pesa más.
     COMPARTIR  (borde dorado, punteado) -> "quiero pasarle esto a otra
                persona". No compite con el anterior porque se ve distinto:
                otro color, otro borde y una etiqueta que lo dice.

   Antes estaba todo al pie y mucha gente no llegaba nunca.
   ========================================================================== */
.acciones-ficha {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 18px;
  margin: 26px 0 34px;
}
.acciones-ficha.acciones-pie { grid-template-columns: 1fr; margin: 26px 0 0; }

.acc-bloque { padding: 12px 14px 13px; min-width: 0; }
.acc-consultar {
  background: #fbf4f4;
  border: 1px solid #e3d0d0;
  border-left: 4px solid var(--wine);
}
.acc-compartir {
  background: var(--paper);
  border: 1px dashed #d8c9a8;
  border-left: 4px solid var(--gold);
}

.acc-tit {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 9px;
}
.acc-consultar .acc-tit { color: var(--wine); }
.acc-compartir .acc-tit { color: #8a6a1c; }

/* 20/09/2026, a pedido de Flavio ("achicar los botones de WhatsApp/
   Compartir/Copiar link, para optimizar más la ventana"): antes cada
   botón ocupaba el ancho entero y quedaban apilados uno debajo del otro,
   así que 2 o 3 botones se comían un montón de alto. Ahora van en FILA
   (`flex-wrap`, sin `flex-direction: column`): entran 2 o 3 por línea
   donde hay lugar (el bloque "Consultar" arriba, más ancho) y se acomodan
   solos a 1 o 2 por línea donde el lugar es angosto (el pie, en la columna
   lateral) — no hace falta un caso aparte para cada ancho. */
.acc-botones { display: flex; flex-wrap: wrap; gap: 8px; }

/* Cada botón dice qué hace Y qué va a pasar. Un cliente que duda necesita
   saber si le va a abrir WhatsApp o si le vamos a pedir el teléfono. */
/* 29/09/2026, segunda vuelta a pedido de Flavio ("achicarlos más"): ya no
   se estiran para llenar el renglón — cada botón ocupa lo que dice — y
   son un poco más bajos. En el celular (abajo) sí se reparten el ancho,
   para que sean fáciles de tocar con el dedo. */
.acc-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--charcoal);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  min-width: 0;
}
.acc-btn:hover {
  border-color: var(--wine);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(36,29,26,.09);
}
.acc-ico { flex: none; width: 16px; height: 16px; }
.acc-ico svg { width: 100%; height: 100%; display: block; }
.acc-txt { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.acc-txt strong { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.acc-txt span { font-size: 10.5px; color: var(--stone); line-height: 1.2; }

/* El de WhatsApp es el que más se usa: va lleno y con el verde de WhatsApp,
   que la gente reconoce de lejos. */
.acc-btn.acc-wa {
  background: #1f8f4e;
  border-color: #1f8f4e;
  color: #fff;
}
.acc-btn.acc-wa .acc-txt span { color: rgba(255,255,255,.85); }
.acc-btn.acc-wa:hover { background: #19783f; border-color: #19783f; }

.acc-compartir .acc-btn:hover { border-color: var(--gold); }
.acc-btn.copiado { border-color: #1f8f4e; }
.acc-btn.copiado .acc-txt strong { color: #1f8f4e; }

.acc-nota {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--stone);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .acciones-ficha { grid-template-columns: 1fr; gap: 14px; margin: 22px 0 28px; }
}
@media (max-width: 420px) {
  /* 20/09/2026: con los botones ya chicos y en fila, en un celular angosto
     alcanza con bajarles un toque más el ancho mínimo para que entren 2 por
     línea en vez de quedar 1 solo por línea sin necesidad. Las letras ya
     quedaron chicas en la base de arriba, no hace falta agrandarlas acá. */
  .acc-btn { flex: 1 1 130px; }
  .acc-bloque { padding: 12px 13px 13px; }
}

/* ==========================================================================
   CRITERIOS DE UN PEDIDO (ventana chica del panel)
   Lo que busca el cliente, convertido en casilleros comparables.
   ========================================================================== */
/* ⚠️ LA CAJA QUE FLOTA POR ENCIMA DE LA PANTALLA.

   Toda ventanita del panel (criterios, asignar sucursal, seguimiento) tiene
   que llevar la clase `fb-modal` en su contenedor. Sin ella, el fondo oscuro
   —que está posicionado contra su contenedor— se escapa y tapa toda la
   página, y la caja cae al final del documento, fuera de la vista: se ve
   todo oscuro y NINGUNA ventana. Le pasó a Flavio el 02/09/2026 con
   "Asignar sucursal" y con "Tomar pedido".

   Los tres ids quedan listados además de la clase, como red de seguridad
   por si alguien arma un modal nuevo y se olvida de ponerla. */
.fb-modal,
#crit-modal, #asig-modal, #sg-modal { position: fixed; inset: 0; z-index: 4200; }
.crit-fondo {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 16, 0.62);
}
.crit-caja {
  position: relative;
  margin: 5vh auto 0;
  width: min(560px, calc(100% - 32px));
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}
.crit-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-strong);
  flex: none;
}
.crit-cuerpo { padding: 16px 18px; overflow-y: auto; }
.crit-cuerpo .field { margin-bottom: 12px; }
.crit-pie {
  padding: 14px 18px;
  border-top: 1px solid var(--line-strong);
  display: flex;
  justify-content: flex-end;
  flex: none;
}
.crit-original {
  background: var(--paper-2, rgba(0, 0, 0, 0.035));
  border-left: 2px solid var(--line-strong);
  padding: 9px 11px;
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
}
.crit-dos { display: grid; grid-template-columns: 1fr 130px; gap: 12px; }
@media (max-width: 520px) {
  .crit-dos { grid-template-columns: 1fr; }
  .crit-caja { margin-top: 2vh; max-height: 96vh; }
}

/* Una etiqueta de estado que además es un botón (ej. "Sin asignar ✏️" en
   Pedidos y en Quiero vender: se hace clic y se elige la sucursal). */
.status-pill.pill-boton {
  border: 1px dashed currentColor;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.status-pill.pill-boton:hover { background: rgba(0, 0, 0, 0.05); }
.status-pill.pill-boton:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Seguimiento de un pedido (quién lo tiene y qué fue haciendo). */
.sg-aviso {
  background: var(--paper-2, rgba(0, 0, 0, 0.035));
  border-left: 2px solid var(--line-strong);
  padding: 9px 11px;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
}
.sg-bloque { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.sg-agregar { display: flex; gap: 8px; margin-bottom: 12px; }
.sg-agregar input { flex: 1; min-width: 0; }
.sg-fila {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px dotted var(--line);
  font-size: 13px;
}
.sg-fila:last-child { border-bottom: none; }
.sg-meta { font-family: var(--font-mono); font-size: 11px; color: var(--stone); }
.sg-texto { line-height: 1.5; }
.sg-vacio { color: var(--stone); font-size: 13px; margin: 0; }
.cli-seguimiento { margin-top: 8px; border-top: 1px dotted var(--line); padding-top: 6px; }

/* Cartel de "estás viendo lo que encaja con un pedido". */
.aviso-pedido {
  background: var(--paper-2, rgba(0, 0, 0, 0.035));
  border-left: 3px solid var(--gold, #a07d949);
  padding: 11px 13px;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
}
.aviso-pedido[hidden] { display: none !important; }
.aviso-pedido .cell-sub { margin-top: 3px; }
.aviso-pedido .btn-inline { margin-top: 9px; }

/* Filtros de la pantalla de Pedidos. */
.req-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.req-filtros select,
.req-filtros input {
  font: inherit;
  font-size: 13px;
  padding: 7px 9px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: inherit;
  min-width: 0;
}
.req-filtros input[type="number"] { width: 110px; }
.req-filtros input[type="text"] { width: 150px; }
@media (max-width: 700px) {
  .req-filtros select,
  .req-filtros input { flex: 1 1 46%; }
}

/* ==========================================================================
   AVISOS DE CARGA Y DE LECTURA FALLIDA (03/09/2026)
   --------------------------------------------------------------------------
   Van AFUERA de la tabla a propósito: .admin-table tiene min-width 640px
   adentro de un marco que se corre de costado, así que un aviso metido en un
   <td> queda fuera de la pantalla en el celular. Y es justo el aviso que más
   importa: el que le dice a Flavio que sus pedidos no se perdieron.
   ========================================================================== */
.admin-aviso-carga {
  padding: 22px 18px;
  text-align: center;
  color: var(--stone);
  font-size: 14px;
}
.admin-aviso-error {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--wine);
  border-left: 4px solid var(--wine);
  border-radius: var(--radius);
  background: #fdf3f3;
  color: var(--wine-dark);
  font-size: 14px;
  line-height: 1.55;
}
.admin-aviso-error strong { color: var(--wine); }

/* ==========================================================================
   LA CHARLA ADENTRO DE LA FICHA — ETAPA D (03/09/2026)
   --------------------------------------------------------------------------
   "Que el agente pueda ver lo que se habló y armar el mapa mental antes de
   contactarse." Las burbujas son las mismas que las del chat en vivo, para
   que se lea igual en los dos lados.
   ========================================================================== */
.inq-charla { margin: 10px 0 4px; }
.ch-abrir { font-size: 13px; }
.ch-caja {
  margin-top: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  background: var(--paper);
}
.ch-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.ch-cab-sub { font-size: 13px; color: var(--stone); }
.ch-sin { margin: 0; font-size: 13px; color: var(--stone); line-height: 1.6; }
.ch-aviso {
  margin: 0 0 10px; padding: 8px 10px; font-size: 13px; line-height: 1.5;
  border-left: 3px solid var(--gold); background: #fdf8ee; color: var(--charcoal);
}
.ch-resumen {
  margin: 0 0 12px; padding: 10px 12px;
  background: var(--ivory); border-radius: var(--radius);
}
.ch-res-fila { display: flex; gap: 10px; padding: 2px 0; font-size: 14px; }
.ch-res-k { flex: 0 0 130px; color: var(--stone); }
.ch-res-v { flex: 1; color: var(--charcoal); font-weight: 500; }
.ch-props { margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.ch-props .eyebrow { flex: 1 0 100%; }
.ch-prop { text-align: left; }
.ch-mensajes { max-height: 420px; overflow-y: auto; padding-right: 4px; }
.ch-msg { margin-bottom: 10px; max-width: 88%; }
.ch-msg.de-cliente { margin-right: auto; }
.ch-msg.de-fabi { margin-left: auto; }
.ch-quien {
  display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--stone-light); margin-bottom: 2px;
}
.ch-msg.de-fabi .ch-quien { text-align: right; }
.ch-texto {
  padding: 9px 12px; border-radius: 10px; font-size: 14px; line-height: 1.55;
  background: #fff; border: 1px solid var(--line); color: var(--charcoal);
  overflow-wrap: anywhere;
}
.ch-msg.de-fabi .ch-texto { background: var(--ivory); border-color: var(--line-strong); }
.ch-vacio { margin: 0; font-size: 13px; color: var(--stone); }

/* La propiedad de la consulta, ahora botón en vez de link. */
.inq-prop-boton {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-decoration: underline;
  text-underline-offset: 2px;
}
.inq-prop-boton:hover { color: var(--wine); }

@media (max-width: 640px) {
  .ch-res-fila { flex-direction: column; gap: 0; }
  .ch-res-k { flex: none; }
  .ch-msg { max-width: 100%; }
}

/* ==========================================================================
   EL AVISO DE "ALGUIEN PIDE QUE LO HABILITES" — 03/09/2026
   --------------------------------------------------------------------------
   Habilitar a la persona equivocada entrega el panel completo. El aviso tiene
   que verse, no tiene que ser un renglón gris más.
   ========================================================================== */
.acc-aviso-serio {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--wine);
  border-left: 4px solid var(--wine);
  border-radius: var(--radius);
  background: #fdf3f3;
  color: var(--wine-dark);
  font-size: 14px;
  line-height: 1.55;
}
.acc-espera-fila { align-items: flex-start; gap: 12px; }
.acc-espera-acc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acc-ojo { color: var(--wine); font-weight: 500; }
@media (max-width: 640px) {
  .acc-espera-fila { flex-direction: column; }
}

/* ==========================================================================
   SACAR CHARLAS DE LA LISTA DE CONVERSACIONES — 05/09/2026
   La casilla va AL LADO de la fila, no adentro: la fila es un <button> y un
   checkbox adentro de un botón no se puede tildar.
   ========================================================================== */
.conv-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.conv-item > .conv-fila { flex: 1; min-width: 0; }
.conv-marca {
  display: flex;
  align-items: center;
  padding: 14px 0 0 6px;
  cursor: pointer;
}
.conv-marca input { width: 17px; height: 17px; cursor: pointer; }

.conv-ver-tapadas {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--stone);
  cursor: pointer;
}
.conv-ver-tapadas input { width: 16px; height: 16px; cursor: pointer; }

/* La barrita que aparece sola cuando hay charlas marcadas. */
.conv-marcadas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
  padding: 11px 14px;
  border: 1px solid var(--line, #e3ddd3);
  border-left: 4px solid var(--wine, #6d1b1e);
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
}
.conv-marcadas-acc { display: flex; gap: 8px; flex-wrap: wrap; }

/* ⚠️ Los dos bloques de arriba usan display:flex, y eso PISA al atributo
   "hidden" del HTML: quedaban a la vista aunque el programa los escondiera.
   Le pasaba justo a quien NO tiene el permiso de borrar: veía la barra de
   acciones igual. (05/09/2026.) */
.conv-marcadas[hidden],
.conv-ver-tapadas[hidden] { display: none !important; }

/* El titular de la propiedad, debajo del código de la ficha en la lista.
   Es un dato interno: se marca distinto para que se note de un vistazo que
   eso NO se muestra al cliente. (05/09/2026.) */
.prop-titular {
  margin-top: 3px;
  color: var(--wine, #6d1b1e);
  font-weight: 600;
}

/* ⚠️ .form-group define display:flex, y eso PISA al atributo "hidden" del
   HTML: la caja del titular quedaba a la vista aunque el programa la
   escondiera. Es la misma trampa que ya estaba anotada para .conv-marcadas.
   (Revisión independiente del 05/09/2026.) */
#caja-propietario[hidden] { display: none !important; }

/* ==========================================================================
   Páginas de categoría (casas-en-venta-viedma, alquileres-viedma, etc.)
   Etapa 2 de SEO, 05/09/2026.
   El bloque de texto de arriba no es decoración: es lo que Google lee para
   entender de qué se trata la página. Por eso va ANTES del listado y con
   ancho de lectura cómodo, no a todo lo ancho de la pantalla.
   ========================================================================== */
.cat-intro {
  max-width: 62ch;
  margin: 0 0 40px;
}
.cat-intro p {
  margin: 0 0 14px;
  color: var(--charcoal);
  line-height: 1.7;
}
.cat-intro p:last-child { margin-bottom: 0; }

.cat-vacio {
  border: 1px dashed var(--line-strong);
  padding: 22px;
  text-align: center;
  color: var(--stone);
}
.cat-vacio[hidden] { display: none !important; }

.cat-pie {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 40px 0 0;
}

.cat-otras {
  margin: 56px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
}
.cat-otras h2 {
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0 0 14px;
}
.cat-otra {
  display: inline-block;
  margin: 0 10px 10px 0;
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  font-size: 0.86rem;
  color: var(--charcoal);
  text-decoration: none;
}
.cat-otra:hover {
  background: var(--paper-2, #f2efe9);
  border-color: var(--charcoal);
}

@media (max-width: 700px) {
  .cat-intro { max-width: none; }
  .cat-pie .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Aviso de las fichas viejas sin la marca de "publicada" (admin-propiedades).
   06/09/2026. Ver fichasSinMarcaDePublicacion() en storage.js.
   ========================================================================== */
.aviso-marca {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
  border: 1px solid var(--gold);
  border-left: 5px solid var(--gold);
  background: #fdf8ee;
  padding: 16px 18px;
  margin-bottom: 18px;
}
/* Sin esto el "hidden" no lo esconde: el display:flex de arriba le gana.
   Ya nos pasó tres veces en otras pantallas. */
.aviso-marca[hidden] { display: none !important; }

.aviso-marca-txt { flex: 1 1 460px; min-width: 0; }
.aviso-marca-txt strong { display: block; margin-bottom: 6px; font-size: 0.98rem; }
.aviso-marca-txt p {
  margin: 0 0 8px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--charcoal);
}
.aviso-marca-txt p:last-child { margin-bottom: 0; }

.aviso-marca-acc {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}
.aviso-marca-estado { font-size: 0.8rem; color: var(--stone); }

@media (max-width: 700px) {
  .aviso-marca-acc { align-items: stretch; width: 100%; }
  .aviso-marca-acc .btn { width: 100%; justify-content: center; }
}


/* ==========================================================================
   "ESTÁS COMO …" — 29/09/2026, a pedido de Flavio (ver mostrarQuienSoy en
   auth.js): el usuario de la sesión, en la barra de arriba del panel.
   ========================================================================== */
.quien-soy {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 13px;
  color: var(--stone);
  white-space: nowrap;
  /* 04/10/2026: antes 260px; con las etiquetas "admin" y "compartida" el
     nombre quedaba aplastado y casi no se leía. */
  max-width: 460px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quien-soy strong { color: var(--ink, #241d1a); font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-width: 6ch; }
.quien-soy-et, .quien-soy-rol { flex: none; }
.quien-soy-rol {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  padding: 1px 5px;
  color: var(--wine);
}
@media (max-width: 760px) {
  .quien-soy { max-width: 160px; font-size: 12px; }
  .quien-soy-et, .quien-soy-rol { display: none; }
}


/* ==========================================================================
   PORTADA CON MÁS IMPACTO (04/10/2026)
   Pedido de Flavio: los tres accesos y los seis tipos de inmueble un poco
   más chicos pero con volumen (sombra, brillo arriba) y que crezcan al pasar
   el mouse; las destacadas en carrusel; el botón "Ver todas" más fuerte; y
   una cinta vertical que se mueve, en el costado izquierdo.
   Todo está acotado a estas clases: no toca otras pantallas.
   ========================================================================== */

/* ---- Tres accesos: más compactos, con relieve ---- */
.accesos { gap: 16px; margin-bottom: 38px; }
.acceso {
  padding: 18px 20px 16px;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, var(--paper) 55%, #f3ece0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 0 rgba(89, 0, 0, 0.08),
    0 6px 14px rgba(36, 29, 26, 0.12),
    0 14px 26px rgba(36, 29, 26, 0.08);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.acceso:hover,
.acceso:focus-visible {
  transform: translateY(-4px) scale(1.045);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 10px 20px rgba(89, 0, 0, 0.18),
    0 22px 38px rgba(36, 29, 26, 0.16);
}
.acceso-ico { width: 38px; height: 38px; margin-bottom: 10px; }
.acceso-ico svg { width: 20px; height: 20px; }
.acceso h3 { font-size: 20px; margin: 4px 0 6px; }
.acceso p { font-size: 13.5px; line-height: 1.45; margin-bottom: 14px; }
.acceso-go { font-size: 11.5px; }

/* ---- Seis tipos de inmueble: tarjetas sueltas, con relieve ---- */
.cat-grid {
  gap: 16px;
  background: none;
  border: 0;
  padding: 6px 4px 14px;   /* lugar para que la sombra y el crecimiento no se corten */
  margin: 0 -4px;
}
.cat-card {
  padding: 20px 20px 18px;
  gap: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, var(--paper) 60%, #f3ece0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 0 rgba(89, 0, 0, 0.07),
    0 6px 14px rgba(36, 29, 26, 0.11),
    0 12px 22px rgba(36, 29, 26, 0.07);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.cat-card:hover,
.cat-card:focus-visible {
  background: linear-gradient(180deg, #ffffff 0%, #fbf7ef 100%);
  border-color: var(--wine);
  transform: translateY(-4px) scale(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 10px 20px rgba(89, 0, 0, 0.17),
    0 22px 36px rgba(36, 29, 26, 0.15);
  position: relative;
  z-index: 2;
}
.cat-card h3 { font-size: 18px; }
.cat-card p { font-size: 13px; }

/* ---- Botón "Ver todas" de las destacadas ---- */
.btn.btn-ver-todas {
  padding: 17px 38px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--paper);
  border: 1px solid var(--wine-dark);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--wine-soft) 0%, var(--wine) 52%, var(--wine-dark) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18),
    0 6px 14px rgba(89, 0, 0, 0.32),
    0 14px 26px rgba(89, 0, 0, 0.16);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn.btn-ver-todas span { display: inline-block; font-size: 18px; line-height: 1; transition: transform 0.2s ease; }
.btn.btn-ver-todas:hover,
.btn.btn-ver-todas:focus-visible {
  background: linear-gradient(180deg, #c0343a 0%, var(--wine-soft) 52%, var(--wine) 100%);
  transform: translateY(-3px) scale(1.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18),
    0 12px 22px rgba(89, 0, 0, 0.38),
    0 24px 38px rgba(89, 0, 0, 0.2);
}
.btn.btn-ver-todas:hover span { transform: translateX(5px); }
.btn.btn-ver-todas:active { transform: scale(1.02); }

/* ---- Carrusel de destacadas ---- */
.dest-carrusel { position: relative; padding: 0 26px 14px; margin: 0 -26px; }
.dest-ventana {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* aire arriba y abajo para que la sombra y el "levantar" de la tarjeta no se corten */
  padding: 12px 4px 26px;
  margin: -12px -4px -26px;
  outline: none;
}
.dest-ventana::-webkit-scrollbar { display: none; }
.dest-ventana:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.dest-pista {
  display: flex;
  gap: 24px;
}
.dest-pista .property-card {
  flex: 0 0 calc((100% - 48px) / 3);
}
.dest-pista .empty-state { flex: 1 1 100%; }
.dest-vacio .dest-flecha, .dest-vacio .dest-puntos { display: none; }
.dest-sin-nav .dest-flecha { display: none; }

.dest-flecha {
  position: absolute;
  top: calc(50% - 40px);
  z-index: 5;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--wine-dark);
  color: var(--paper);
  font-size: 30px;
  line-height: 1;
  padding: 0 0 4px;
  cursor: pointer;
  background: linear-gradient(180deg, var(--wine-soft), var(--wine) 55%, var(--wine-dark));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 6px 14px rgba(89,0,0,0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dest-flecha:hover, .dest-flecha:focus-visible { transform: scale(1.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 10px 20px rgba(89,0,0,0.42); }
.dest-prev { left: -4px; }
.dest-next { right: -4px; }

.dest-puntos { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
.dest-punto {
  width: 11px; height: 11px; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--wine);
  background: transparent;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, width 0.2s ease;
}
.dest-punto:hover { transform: scale(1.3); }
.dest-punto.on { background: var(--wine); width: 28px; border-radius: 6px; }

@media (max-width: 980px) {
  .dest-pista .property-card { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 640px) {
  .dest-carrusel { padding: 0 0 14px; margin: 0; }
  .dest-pista .property-card { flex-basis: 86%; }
  .dest-flecha { display: none; }
  .btn.btn-ver-todas { padding: 14px 26px; font-size: 13px; }
}

/* ---- Cinta vertical (solo pantallas anchas, solo portada) ---- */
.cinta-v { display: none; }
@media (min-width: 1360px) {
  .cinta-v {
    display: block;
    position: fixed;
    left: 0;
    top: 89px;          /* justo debajo del encabezado fijo (88 px + su línea) */
    bottom: 0;
    width: 64px;
    z-index: 40;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(90deg, var(--wine-dark) 0%, var(--wine) 60%, #5c1719 100%);
    box-shadow: 4px 0 14px rgba(36, 29, 26, 0.28);
    border-right: 1px solid rgba(166, 124, 61, 0.55);
  }
  .cinta-v::before, .cinta-v::after {
    /* desvanecido arriba y abajo, para que las palabras aparezcan y se vayan suave */
    content: "";
    position: absolute; left: 0; right: 0; height: 70px; z-index: 2;
  }
  .cinta-v::before { top: 0; background: linear-gradient(180deg, var(--wine-dark), rgba(75,19,21,0)); }
  .cinta-v::after { bottom: 0; background: linear-gradient(0deg, var(--wine-dark), rgba(75,19,21,0)); }
  .cinta-v-pista {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: cintaBaja 66s linear infinite;
    will-change: transform;
  }
  .cinta-v-bloque { display: flex; flex-direction: column; align-items: center; }
  .cinta-v-item {
    writing-mode: vertical-rl;
    transform: rotate(180deg);          /* se lee de abajo hacia arriba: el PRINCIPIO del texto es lo primero que entra al bajar la cinta, y el renglón queda hacia adentro de la pantalla */
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 16px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--paper);
    padding: 18px 0;
  }
  .cinta-v-item.frase {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 22px;
    letter-spacing: 0.05em;
    text-transform: none;
    color: #e6c58a;
  }
  .cinta-v-rombo {
    display: block;
    width: 9px; height: 9px;
    background: var(--gold);
    transform: rotate(45deg);
    margin: 10px 0;
    flex: none;
  }
  /* Baja: arranca corrida media vuelta hacia arriba y va hasta 0. */
  @keyframes cintaBaja {
    from { transform: translateY(-50%); }
    to { transform: translateY(0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .cinta-v-pista { animation: none !important; }
  .acceso:hover, .acceso:focus-visible,
  .cat-card:hover, .cat-card:focus-visible,
  .btn.btn-ver-todas:hover, .btn.btn-ver-todas:focus-visible { transform: none; }
}

/* Las tarjetas de tipo de inmueble aparecen con el efecto "reveal" (ver más
   arriba); esa regla es más fuerte que el hover y lo anulaba. Acá se
   reafirma el hover una vez que la tarjeta ya apareció, sin la demora
   escalonada de la aparición. */
.js-anim .cat-card.reveal.is-visible {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease, opacity 0.3s ease;
  transition-delay: 0ms;
}
.js-anim .cat-card.reveal.is-visible:hover,
.js-anim .cat-card.reveal.is-visible:focus-visible {
  transform: translateY(-4px) scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
  .js-anim .cat-card.reveal.is-visible:hover { transform: none; }
}

/* Las tarjetas del carrusel no usan la aparición por scroll de la página
   (las de la derecha, fuera de la ventana, quedarían invisibles). Se pisa el
   "reveal" por CSS para que no dependa de en qué momento se arma cada cosa. */
.js-anim .dest-pista .property-card.reveal {
  opacity: 1;
  transform: none;
  transition: border-color 0.2s ease, transform 0.28s ease, box-shadow 0.28s ease;
  transition-delay: 0ms;
  will-change: auto;
}
.js-anim .dest-pista .property-card.reveal:hover,
.js-anim .dest-pista .property-card.reveal:focus-within {
  transform: translateY(-5px);
}
@media (prefers-reduced-motion: reduce) {
  .js-anim .dest-pista .property-card.reveal:hover { transform: none; }
}


/* ==========================================================================
   MÁS VOLUMEN (04/10/2026, segunda vuelta)
   Pedido de Flavio: más volumen en los botones, buscador separado de los
   tres accesos y con más impacto. Efecto "botón levantado": un borde duro
   abajo + sombra suave, que se hunde al apretar.
   ========================================================================== */
.acceso {
  border-bottom-color: var(--line-strong);
  background: linear-gradient(180deg, #ffffff 0%, #fbf8f1 45%, #efe5d3 100%);
  box-shadow:
    inset 0 2px 0 #ffffff,
    inset 0 -2px 6px rgba(124, 111, 97, 0.14),
    0 5px 0 #cdbfa6,
    0 12px 18px rgba(36, 29, 26, 0.2),
    0 24px 36px rgba(36, 29, 26, 0.12);
  margin-bottom: 5px;
}
.acceso:hover,
.acceso:focus-visible {
  box-shadow:
    inset 0 2px 0 #ffffff,
    inset 0 -2px 6px rgba(124, 111, 97, 0.14),
    0 7px 0 var(--wine),
    0 18px 26px rgba(89, 0, 0, 0.26),
    0 32px 46px rgba(36, 29, 26, 0.16);
}
.acceso:active { transform: translateY(3px) scale(1.02); box-shadow: inset 0 2px 0 #fff, 0 2px 0 var(--wine), 0 6px 10px rgba(36,29,26,.2); }
.acceso::after { display: none; }       /* el borde de abajo ya cumple esa función */
.acceso-ico { box-shadow: 0 3px 6px rgba(89, 0, 0, 0.18), inset 0 1px 0 #fff; background: linear-gradient(180deg, #fff, #f5e9e4); border-style: solid; }

.cat-card {
  background: linear-gradient(180deg, #ffffff 0%, #fbf8f1 45%, #efe5d3 100%);
  box-shadow:
    inset 0 2px 0 #ffffff,
    inset 0 -2px 6px rgba(124, 111, 97, 0.14),
    0 5px 0 #cdbfa6,
    0 12px 18px rgba(36, 29, 26, 0.18),
    0 22px 32px rgba(36, 29, 26, 0.1);
}
.cat-grid { padding-bottom: 22px; row-gap: 22px; }
.cat-card:hover,
.cat-card:focus-visible,
.js-anim .cat-card.reveal.is-visible:hover,
.js-anim .cat-card.reveal.is-visible:focus-visible {
  box-shadow:
    inset 0 2px 0 #ffffff,
    0 7px 0 var(--wine),
    0 18px 26px rgba(89, 0, 0, 0.24),
    0 30px 44px rgba(36, 29, 26, 0.15);
}
.cat-card .go { text-shadow: 0 1px 0 #fff; }

.btn.btn-ver-todas {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    inset 0 -3px 0 rgba(0, 0, 0, 0.2),
    0 5px 0 #3a0d0f,
    0 14px 22px rgba(89, 0, 0, 0.35),
    0 26px 36px rgba(89, 0, 0, 0.18);
  margin-bottom: 5px;
}
.btn.btn-ver-todas:hover,
.btn.btn-ver-todas:focus-visible {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    inset 0 -3px 0 rgba(0, 0, 0, 0.2),
    0 7px 0 #3a0d0f,
    0 20px 30px rgba(89, 0, 0, 0.42),
    0 34px 46px rgba(89, 0, 0, 0.2);
}
.btn.btn-ver-todas:active { transform: translateY(3px) scale(1.03); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 2px 0 #3a0d0f, 0 6px 10px rgba(89,0,0,.35); }

/* ---- Buscador: separado de los accesos y con presencia ---- */
.accesos { margin-bottom: 56px; }
.quick-search {
  margin-top: 0;
  padding: 30px 30px 28px;
  gap: 20px;
  border: 1px solid var(--line-strong);
  border-top: 4px solid var(--wine);
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #fbf8f1 55%, #f1e8d8 100%);
  box-shadow:
    inset 0 2px 0 #ffffff,
    0 6px 0 #cdbfa6,
    0 18px 28px rgba(36, 29, 26, 0.2),
    0 34px 54px rgba(36, 29, 26, 0.12);
  margin-bottom: 8px;
}
.quick-search .field label { color: var(--wine); font-weight: 600; }
.quick-search .field select {
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 11px 10px;
  box-shadow: inset 0 2px 4px rgba(36, 29, 26, 0.1), 0 1px 0 #fff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.quick-search .field select:hover { border-color: var(--wine-soft); }
.quick-search .field select:focus { border-color: var(--wine); box-shadow: inset 0 2px 4px rgba(36,29,26,.1), 0 0 0 3px rgba(174, 43, 48, 0.18); }
.quick-search .btn-primary {
  padding: 16px 34px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid var(--wine-dark);
  background: linear-gradient(180deg, var(--wine-soft) 0%, var(--wine) 55%, var(--wine-dark) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -3px 0 rgba(0, 0, 0, 0.2),
    0 4px 0 #3a0d0f,
    0 10px 16px rgba(89, 0, 0, 0.32);
  margin-bottom: 4px;
}
.quick-search .btn-primary:hover,
.quick-search .btn-primary:focus-visible {
  transform: translateY(-2px) scale(1.06);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    inset 0 -3px 0 rgba(0, 0, 0, 0.2),
    0 6px 0 #3a0d0f,
    0 16px 24px rgba(89, 0, 0, 0.4);
}
.quick-search .btn-primary:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 1px 0 #3a0d0f, 0 4px 8px rgba(89,0,0,.3); }
@media (max-width: 980px) {
  .quick-search { margin-top: 0; padding: 22px 20px; }
  .accesos { margin-bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .acceso:active, .quick-search .btn-primary:hover, .btn.btn-ver-todas:active { transform: none; }
}


/* ==========================================================================
   BOTONES DEL MAPA EN LA PORTADA (04/10/2026)
   "Ver todas las propiedades en el mapa" y "Ver propiedades en el mapa por
   zona": grandes, con volumen y un brillo que los recorre de vez en cuando
   para que llamen la atención (un buen servicio al cliente, a pedido de
   Flavio). Mismo "botón levantado" que el resto de la portada.
   ========================================================================== */
.hero-mapas { display: flex; flex-direction: column; align-items: stretch; gap: 14px; max-width: 470px; margin-top: 8px; }
.hm-etiqueta {
  margin: 0 0 -2px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex; align-items: center; gap: 10px;
}
.hm-etiqueta::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }

.btn-mapa {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 20px 15px 16px;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  font-family: var(--font-body);
  margin-bottom: 5px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.btn-mapa .bm-ico {
  flex: none;
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.btn-mapa .bm-ico svg { width: 26px; height: 26px; }
.btn-mapa .bm-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.btn-mapa .bm-txt strong { font-family: var(--font-display); font-size: 17.5px; line-height: 1.15; font-weight: 700; }
.btn-mapa .bm-txt small { font-size: 12.5px; line-height: 1.3; opacity: 0.88; }
.btn-mapa .bm-flecha { flex: none; font-style: normal; font-size: 24px; line-height: 1; transition: transform 0.2s ease; }
.btn-mapa:hover .bm-flecha, .btn-mapa:focus-visible .bm-flecha { transform: translateX(6px); }
.btn-mapa:hover, .btn-mapa:focus-visible { transform: translateY(-3px) scale(1.04); }
.btn-mapa:active { transform: translateY(3px) scale(1.01); }

/* Principal: vino */
.btn-mapa-todas {
  color: var(--paper);
  border: 1px solid var(--wine-dark);
  background: linear-gradient(180deg, var(--wine-soft) 0%, var(--wine) 52%, var(--wine-dark) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.3), inset 0 -3px 0 rgba(0,0,0,.2), 0 5px 0 #3a0d0f, 0 14px 22px rgba(89,0,0,.36), 0 26px 38px rgba(89,0,0,.18);
}
.btn-mapa-todas .bm-ico { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.btn-mapa-todas:hover, .btn-mapa-todas:focus-visible {
  background: linear-gradient(180deg, #c0343a 0%, var(--wine-soft) 52%, var(--wine) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -3px 0 rgba(0,0,0,.2), 0 7px 0 #3a0d0f, 0 20px 30px rgba(89,0,0,.42), 0 34px 46px rgba(89,0,0,.2);
}
/* Por zona: dorado, para que se distinga y no compitan iguales */
.btn-mapa-zona {
  color: var(--wine-dark);
  border: 1px solid #a67c3d;
  background: linear-gradient(180deg, #fff3d2 0%, #f3d9a4 52%, #e0b872 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.75), inset 0 -3px 0 rgba(166,124,61,.28), 0 5px 0 #8f6a30, 0 14px 22px rgba(120,84,26,.34), 0 26px 38px rgba(120,84,26,.16);
}
.btn-mapa-zona .bm-ico { background: rgba(109,27,30,.1); border: 1px solid rgba(109,27,30,.5); color: var(--wine); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.btn-mapa-zona:hover, .btn-mapa-zona:focus-visible {
  background: linear-gradient(180deg, #fffaf0 0%, #fbe7bd 52%, #ebc984 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.85), inset 0 -3px 0 rgba(166,124,61,.28), 0 7px 0 #8f6a30, 0 20px 30px rgba(120,84,26,.4), 0 34px 46px rgba(120,84,26,.2);
}
.btn-mapa-todas:active { box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 1px 0 #3a0d0f, 0 5px 9px rgba(89,0,0,.35); }
.btn-mapa-zona:active { box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 1px 0 #8f6a30, 0 5px 9px rgba(120,84,26,.3); }

/* Brillo que cruza el botón cada tanto (se apaga si la persona pidió menos movimiento) */
.btn-mapa::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  animation: bmBrillo 5.5s ease-in-out infinite;
  pointer-events: none;
}
.btn-mapa-zona::after { animation-delay: 2.7s; }
@keyframes bmBrillo { 0%, 62% { left: -60%; } 100% { left: 130%; } }

@media (max-width: 980px) {
  .hero-mapas { max-width: none; }
}
@media (max-width: 420px) {
  .btn-mapa { padding: 13px 14px 13px 12px; gap: 11px; }
  .btn-mapa .bm-ico { width: 40px; height: 40px; }
  .btn-mapa .bm-txt strong { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-mapa::after { animation: none; display: none; }
  .btn-mapa:hover, .btn-mapa:focus-visible, .btn-mapa:active { transform: none; }
}


/* ==========================================================================
   CINTA EN EL CELULAR / PANTALLAS ANGOSTAS (04/10/2026)
   Pedido de Flavio: "en el celular, que la cinta vaya abajo y esté siempre
   visible por más que uno se mueva en el portal". En pantallas de hasta
   1359 px (celular, tablet y notebook chica, donde no sobra lugar a los
   costados) la misma cinta va ACOSTADA, fija al pie, moviéndose de derecha
   a izquierda. En pantallas anchas sigue vertical a la izquierda.
   Queda por debajo del menú y de las ventanas (z-index bajo) y por encima
   del contenido; los botones flotantes (WhatsApp, Fabi) se suben para no
   taparse con ella.
   ========================================================================== */
@media (max-width: 1359px) {
  .cinta-v {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 36px;
    z-index: 90;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(180deg, #5c1719 0%, var(--wine) 45%, var(--wine-dark) 100%);
    border-top: 1px solid rgba(166, 124, 61, 0.7);
    box-shadow: 0 -4px 14px rgba(36, 29, 26, 0.28);
  }
  .cinta-v::before, .cinta-v::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 28px; z-index: 2;
  }
  .cinta-v::before { left: 0; background: linear-gradient(90deg, var(--wine-dark), rgba(75,19,21,0)); }
  .cinta-v::after { right: 0; background: linear-gradient(270deg, var(--wine-dark), rgba(75,19,21,0)); }
  .cinta-v-pista {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: max-content;
    height: 100%;
    animation: cintaIzq 110s linear infinite;
    will-change: transform;
  }
  .cinta-v-bloque { display: flex; flex-direction: row; align-items: center; flex: none; }
  .cinta-v-item {
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--paper);
    line-height: 36px;
    padding: 0 4px;
  }
  .cinta-v-item.frase {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: none;
    color: #e6c58a;
  }
  .cinta-v-rombo {
    display: block; flex: none;
    width: 6px; height: 6px;
    background: var(--gold);
    transform: rotate(45deg);
    margin: 0 14px;
  }
  @keyframes cintaIzq {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* No se pisa con lo de abajo: se sube lo flotante y se deja lugar al final de la página */
  body.con-cinta { padding-bottom: 36px; }
  body.con-cinta #wa-float { bottom: 56px; }
  body.con-cinta #fb-bot-btn { bottom: 120px; }
  body.con-cinta #cv-btn { bottom: 240px; }
  body.con-cinta .toast { bottom: 60px; }
}
@media (max-width: 640px) {
  body.con-cinta #fb-bot-btn { bottom: 114px; }
}
@media (max-width: 1359px) and (prefers-reduced-motion: reduce) {
  .cinta-v-pista { animation: none !important; }
}


/* ==========================================================================
   DATOS DE LA SUCURSAL SOBRE LA FOTO DE LA PORTADA (04/10/2026)
   Franja oscura pegada al pie de la foto: dirección, teléfono, horario y el
   botón "Cómo llegar" (abre Google Maps). Se arma en index.html.
   ========================================================================== */
.hero-figure .hf-sucursal {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  padding: 20px 12px 9px 12px;
  background: linear-gradient(0deg, rgba(36, 10, 12, 0.94) 0%, rgba(36, 10, 12, 0.86) 58%, rgba(36, 10, 12, 0) 100%);
  color: #fff;
}
.hero-figure .hf-sucursal[hidden] { display: none; }
.hf-datos { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hf-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hf-etiqueta {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #f3d9a4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hf-etiqueta[hidden], .hf-sel[hidden], #hf-tel[hidden] { display: none; }
.hf-sel {
  max-width: 100%;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: #fff; background: rgba(255,255,255,0.14);
  border: 1px solid rgba(243, 217, 164, 0.7); border-radius: 4px;
  padding: 2px 6px; cursor: pointer;
}
.hf-sel option { color: var(--charcoal); background: #fff; }
.hf-dir { font-family: var(--font-display); font-size: 15px; line-height: 1.2; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.hf-linea { display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 0; font-size: 12px; line-height: 1.35; color: rgba(255,255,255,0.92); }
.hf-linea a { color: #f3d9a4; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.hf-linea a:hover { color: #fff; }

.hf-ir {
  flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 14px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wine-dark);
  border: 1px solid #a67c3d; border-radius: 6px;
  background: linear-gradient(180deg, #fff3d2 0%, #f3d9a4 52%, #e0b872 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.75), inset 0 -2px 0 rgba(166,124,61,.3), 0 4px 0 #8f6a30, 0 9px 14px rgba(0,0,0,.4);
  margin-bottom: 4px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.hf-ir svg { width: 16px; height: 16px; flex: none; }
.hf-ir:hover, .hf-ir:focus-visible {
  background: linear-gradient(180deg, #fffaf0 0%, #fbe7bd 52%, #ebc984 100%);
  transform: translateY(-2px) scale(1.07);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.85), inset 0 -2px 0 rgba(166,124,61,.3), 0 6px 0 #8f6a30, 0 14px 20px rgba(0,0,0,.45);
}
.hf-ir:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 1px 0 #8f6a30, 0 3px 6px rgba(0,0,0,.4); }

@media (max-width: 420px) {
  .hero-figure .hf-sucursal { padding: 22px 10px 8px 10px; }
  .hf-dir { font-size: 14px; }
  .hf-ir { padding: 9px 11px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .hf-ir:hover, .hf-ir:focus-visible, .hf-ir:active { transform: none; }
}

/* ==========================================================================
   05/10/2026 — Fabi dentro del chat en vivo, "tomar la charla" e INFORMES
   de la administración a los agentes
   ========================================================================== */
/* El visitante: lo que escribe Fabi se distingue de lo que escribe una persona. */
.cv-msg.fabi { background: #f3ecdf; border-color: #e3d6bd; }
.cv-quien, .cva-quien {
  display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--stone); margin-bottom: 3px;
}
.cv-escribiendo { font-style: italic; }
/* El agente ve qué le contestó Fabi al cliente mientras nadie atendía. */
.cva-msg.fabi { background: #f3ecdf; border-color: #e3d6bd; }
.cva-tomada {
  background: #fff6e0; border: 1px solid #ecd9a8; padding: 8px 10px; margin: 0 0 8px; font-weight: 600; color: #6b4f00;
}

/* Cartel de informes: flota arriba a la derecha, por encima de todo, hasta que se toca "Entendido". */
#cva-informes {
  position: fixed; top: 78px; right: 14px; width: min(380px, calc(100vw - 28px));
  max-height: 72vh; overflow-y: auto; z-index: 10050;
  display: flex; flex-direction: column; gap: 8px;
}
.cva-informe {
  background: #fffaf0; border: 1px solid #e0c98f; border-left: 4px solid var(--wine, #6d1b1e);
  box-shadow: 0 8px 26px rgba(0,0,0,.22); padding: 11px 13px;
}
.cva-informe-cab { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; font-size: 13px; }
.cva-informe-cab span { font-size: 11.5px; color: var(--stone, #6b625b); flex: none; }
.cva-informe-txt { margin: 7px 0 9px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.cva-informe-ok {
  border: 1px solid var(--wine, #6d1b1e); background: var(--wine, #6d1b1e); color: #fff;
  font: inherit; font-weight: 600; font-size: 13px; padding: 6px 14px; cursor: pointer;
}
.cva-informe-ok:disabled { opacity: .6; cursor: default; }
.chat-app #cva-informes { top: calc(var(--app-top, 64px) + 8px); left: 8px; right: 8px; width: auto; }
@media print { #cva-informes { display: none !important; } }

/* ---------- Recuadro "Para el cliente" dentro de la ventana de Fabi (05/10/2026) ----------
   Fabi pone ahí SOLO el texto que se le puede pasar al cliente; lo de afuera
   es para el agente. El botón lo pasa al cuadro de respuesta (no lo envía). */
.cva-pc-fuera { margin-bottom: 6px; }
.cva-paracliente {
  margin: 8px 0 2px;
  border: 2px solid var(--wine);
  background: #fff;
  color: var(--charcoal);
}
.cva-pc-tit {
  padding: 5px 9px;
  background: var(--wine);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cva-pc-tit span { opacity: .8; text-transform: none; letter-spacing: 0; }
.cva-pc-texto { padding: 9px 10px; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; user-select: text; }
.cva-paracliente .cva-pc-btn { margin: 0 8px 8px; }
.cva-paracliente .cva-pc-btn:disabled { opacity: .7; cursor: default; }

/* ---------- Aviso "pasó a mirar…" dentro de la charla del agente (06/10/2026) ---------- */
.cva-marca { align-self: stretch; display: flex; justify-content: center; margin: 4px 0; }
.cva-marca span {
  max-width: 94%; padding: 4px 12px; border: 1px dashed var(--gold);
  background: #fbf5e4; color: var(--charcoal); font-size: 12px; line-height: 1.4;
  text-align: center; overflow-wrap: anywhere;
}
.cva-marca span::before { content: "◉ "; color: var(--gold); }
/* La franja "Está mirando…" se ve más: un poco más grande y con fondo dorado suave */
.cva-mirando { font-size: 13.5px; background: #fbf5e4; border-color: var(--gold); border-left-width: 5px; }
.cva-mirando-txt strong { color: var(--wine); }
.cva-mirando.cva-mirando-nuevo { animation: cvaMirandoNuevo 1.1s ease-in-out 6; }
@keyframes cvaMirandoNuevo { 0%,100% { background: #fbf5e4; } 50% { background: #f2cf7a; } }

/* ---------- Ventanas del panel que se agrandan y achican (06/10/2026) ----------
   Se marcan solas (ver CVA_AGRANDABLES en chatvivo-agente.js). La esquina de
   abajo a la derecha se arrastra con el mouse. */
.fb-agrandable { resize: both; overflow: auto; min-width: min(320px, 96vw); min-height: 200px; }
.fb-agrandable::-webkit-resizer { background: linear-gradient(135deg, transparent 50%, var(--wine) 50%); }

/* ---------- La charla en vivo, en ventana ---------- */
.cva-vivo-caja { width: min(640px, calc(100% - 32px)); }
.cva-vivo-msgs { display: flex; flex-direction: column; gap: 8px; }
.cva-vivo-msg { max-width: 86%; padding: 8px 12px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; background: var(--ivory); border: 1px solid var(--line); align-self: flex-start; }
.cva-vivo-msg.mio { align-self: flex-end; background: var(--charcoal); color: var(--paper); border-color: var(--charcoal); }
.cva-vivo-msg.fabi { background: #f3ecdf; border-color: #e3d6bd; }
.cva-vivo-quien { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; opacity: .7; margin-bottom: 3px; }
.cva-vivo-lugares { margin: 0 0 12px; padding: 8px 10px; background: #fbf5e4; border-left: 3px solid var(--gold); font-size: 13px; }
.cva-vivo-otras { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.cva-vivo-otra { padding: 4px 10px; border: 1px solid var(--line-strong); background: var(--paper); font-size: 12px; cursor: pointer; }
.cva-vivo-otra.on { background: var(--charcoal); color: var(--paper); border-color: var(--charcoal); }
.cva-vivo-slot { display: contents; }

/* ==========================================================================
   06/10/2026 — PROPIEDADES: la parte de arriba, mucho más compacta
   (a pedido de Flavio: "ocupa mucho y le quita a las propiedades, que es lo
   realmente importante"). La franja anclada medía ~290px de alto; ahora una
   sola línea para título + botones del mapa y otra para las categorías
   (~110px). El título sigue en la página (para Google y lectores de
   pantalla); solo se achicó, y la frase explicativa se escondió.
   ========================================================================== */
.propiedades-seccion { padding-top: 6px; padding-bottom: 40px; }
.propiedades-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "titulo mapa" "chips chips";
  align-items: center;
  column-gap: 20px;
  padding-top: 6px;
}
.propiedades-toolbar .section-head { grid-area: titulo; margin: 0; padding: 0; display: block; }
.propiedades-toolbar .section-head .eyebrow,
.propiedades-toolbar .section-head p { display: none; }
.propiedades-toolbar .section-head h1 { font-size: clamp(20px, 2vw, 26px); margin: 0; line-height: 1.2; }
.propiedades-toolbar .mapa-destacado { grid-area: mapa; padding: 0; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.propiedades-toolbar .mapa-destacado-btn { padding: 8px 14px; font-size: 12.5px; }
.propiedades-toolbar .filtros-chips { grid-area: chips; margin-top: 8px; }
.propiedades-toolbar .filtros-chips .filter-bar { padding: 8px 12px; gap: 6px; }
.propiedades-toolbar .filter-chip { padding: 7px 12px; }
.propiedades-seccion .filtros-caja { margin-bottom: 20px; }
.propiedades-seccion .filtros-pie { padding: 8px 14px; }
.propiedades-seccion .filtros-rejilla { padding: 12px 14px; }
@media (max-width: 700px) {
  .propiedades-toolbar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mapa" "titulo" "chips"; row-gap: 6px; }
  .propiedades-toolbar > * { min-width: 0; }
  .propiedades-toolbar .mapa-destacado { justify-content: center; flex-wrap: nowrap; gap: 8px; }
  .propiedades-toolbar .mapa-destacado-btn { flex: 1 1 0; padding: 9px 4px; font-size: 11.5px; white-space: nowrap; }
  .propiedades-toolbar .section-head h1 { font-size: 20px; text-align: center; }
  /* Las categorías en una sola fila que se desliza con el dedo (ocupan una línea, no cuatro). */
  .propiedades-toolbar .filtros-chips .filter-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .propiedades-toolbar .filtros-chips .filter-bar::-webkit-scrollbar { display: none; }
  .propiedades-toolbar .filter-chip { flex: none; white-space: nowrap; }
}

/* Al tocar afuera de una ventana (que es modal) se mueve apenas, para que se note. */
.fb-modal-sacude { animation: fbSacude .28s ease-in-out; }
@keyframes fbSacude { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ==========================================================================
   06/10/2026 — PORTADA EN EL CELULAR: que las propiedades se vean enseguida
   (pedido de Flavio: "el carrusel queda muy abajo y las personas para verlo
   necesitan bajar mucho"). Orden en una columna: título, botones del mapa,
   simulador de crédito, propiedades destacadas (el JS de index.html mueve
   ese bloque), y recién después foto de la oficina, accesos, buscador y
   categorías. En pantallas anchas no cambia nada.
   ========================================================================== */
#dest-seccion[hidden] { display: none !important; }
/* Texto corto de los botones del mapa: solo en el celular (ver abajo) */
.btn-mapa .bm-corto { display: none; }

@media (max-width: 980px) {
  /* minmax(0,1fr): sin esto, el carrusel (que es ancho por dentro) ensancha
     toda la columna y la portada se sale de la pantalla. */
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-bottom: 22px; }
  .hero-inner > * { min-width: 0; }
  .hero-col-der { gap: 18px; }
  /* El simulador ya viene primero (order -1); el bloque de destacadas va justo
     después (mismo order, y está después en el HTML), antes de la foto. */
  .hero-col-der > .dest-bloque { order: -1; margin-top: 4px; min-width: 0; }
  .dest-bloque .section-head { flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; text-align: left; }
  .dest-bloque .section-head > div { min-width: 0; }
  .dest-bloque .section-head .eyebrow { display: none; }
  .dest-bloque .section-head h2 { margin: 0; font-size: 24px; line-height: 1.15; }
  .dest-bloque .section-head .btn { flex: none; align-self: center; padding: 10px 16px; font-size: 12px; }
  /* Ya no está dentro del contenedor con aire a los lados: sin márgenes negativos */
  .hero-col-der .dest-carrusel { margin: 0; padding: 0 0 14px; }
  .hero-col-der .dest-prev { left: 4px; }
  .hero-col-der .dest-next { right: 4px; }
}

@media (max-width: 700px) {
  /* --- Arriba: título corto y botones del mapa lado a lado --- */
  .hero { padding-top: 22px; }
  .hero .eyebrow { margin-bottom: 8px; }
  .hero h1 { font-size: 31px; line-height: 1.08; }
  .hero p.lede { display: none; }
  .hero-mapas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: none; margin-top: 14px; }
  .hm-etiqueta { display: none; }
  .btn-mapa { flex-direction: column; justify-content: center; text-align: center; gap: 7px; padding: 12px 8px 11px; margin-bottom: 4px; }
  .btn-mapa .bm-ico { width: 38px; height: 38px; }
  .btn-mapa .bm-ico svg { width: 22px; height: 22px; }
  .btn-mapa .bm-txt { flex: none; align-items: center; }
  .btn-mapa .bm-txt strong { font-size: 14.5px; }
  .btn-mapa .bm-txt small, .btn-mapa .bm-flecha { display: none; }
  .btn-mapa .bm-largo { display: none; }
  .btn-mapa .bm-corto { display: inline; }

  /* --- Simulador: un poquito más chico, sigue en su lugar --- */
  .hero-credito { padding: 14px 16px 12px; }
  .hero-credito h2 { font-size: 21px; margin: 8px 0 6px; }
  .hero-credito p { font-size: 13px; margin-bottom: 9px; }
  .hero-credito .hc-badge-sim { display: none; }
  .hero-credito .hc-fuente { font-size: 12px; margin-top: 8px; }

  /* --- Destacadas: tarjetas más bajas y se asoma la siguiente --- */
  .dest-bloque .section-head h2 { font-size: 21px; }
  .dest-pista { gap: 14px; }
  .dest-pista .property-card { flex-basis: 78%; }
  .dest-pista .property-media { aspect-ratio: 16/10; }
  .dest-pista .property-body { padding: 12px 14px 14px; gap: 6px; }
  .dest-pista .property-price { font-size: 17px; }
  .dest-pista .property-title { font-size: 16px; line-height: 1.2; }
  .dest-pista .property-specs { margin-top: 2px; padding-top: 9px; gap: 12px; }

  /* --- Categorías: tarjetas chicas de a dos --- */
  .cat-grid { grid-template-columns: 1fr 1fr; gap: 12px; row-gap: 12px; padding-bottom: 10px; }
  .cat-card { padding: 14px 14px 13px; gap: 6px; }
  .cat-card h3 { font-size: 16px; line-height: 1.2; }
  .cat-card p, .cat-card .go { display: none; }
}

/* ==========================================================================
   06/10/2026 (2) — CELULAR: los tres accesos en una sola fila y el buscador
   más chico (pedido de Flavio, viendo la portada en su teléfono).
   ========================================================================== */
@media (max-width: 700px) {
  /* --- Tres accesos, uno al lado del otro: solo ícono y título --- */
  .accesos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 26px; }
  .acceso { padding: 12px 6px 11px; align-items: center; text-align: center; border-top-width: 3px; }
  .acceso-ico { width: 34px; height: 34px; margin: 0 0 7px; }
  .acceso-ico svg { width: 18px; height: 18px; }
  .acceso-num, .acceso p, .acceso-go { display: none; }
  .acceso h3 { font-size: 14.5px; line-height: 1.15; margin: 0; overflow-wrap: anywhere; }
  .acceso:hover, .acceso:focus-visible { transform: none; }

  /* --- Buscador: compacto, de a dos campos --- */
  .quick-search {
    grid-template-columns: 1fr 1fr; gap: 10px 10px;
    padding: 14px 14px 14px; margin-bottom: 4px;
    box-shadow: inset 0 2px 0 #ffffff, 0 4px 0 #cdbfa6, 0 10px 18px rgba(36,29,26,.16);
  }
  .quick-search .field { padding: 0; gap: 3px; min-width: 0; }
  .quick-search .field label { font-size: 10px; letter-spacing: .07em; }
  .quick-search .field select { padding: 8px 4px; font-size: 13px; min-width: 0; width: 100%; }
  .quick-search .btn-primary { grid-column: 1 / -1; padding: 12px 20px; font-size: 13px; margin-bottom: 3px; }
}

/* ==========================================================================
   06/10/2026 (3) — CELULAR: títulos de las secciones de la portada más chicos
   y más juntos (pedido de Flavio): letra más chica, interlineado corto,
   menos aire entre el texto y las tarjetas de abajo.
   ========================================================================== */
@media (max-width: 700px) {
  .cabecera-home { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
  .cabecera-home .eyebrow { font-size: 11px; margin: 0; }
  .cabecera-home h2 { font-size: 23px; line-height: 1.15; margin-top: 4px; }
  .cabecera-home p { font-size: 14px; line-height: 1.45; margin-top: 0; }
  /* menos aire arriba y abajo de las secciones de la portada */
  main > .section { padding: 36px 0; }
  .cat-grid { padding-top: 2px; }
}

/* ==========================================================================
   06/10/2026 (4) — CELULAR: simulador de crédito más chico (pedido de Flavio):
   el título en un solo renglón y menos alto en total. En pantallas anchas no
   cambia nada. (Se usa .hero-col-der delante para ganarle a los estilos que
   el simulador trae dentro de index.html.)
   ========================================================================== */
@media (max-width: 700px) {
  .hero-col-der .hero-credito { padding: 12px 14px 11px; }
  .hero-col-der .hero-credito .hero-credito-badge { font-size: 10px; padding: 3px 9px; gap: 6px; letter-spacing: .1em; }
  .hero-col-der .hero-credito h2 {
    font-size: clamp(14px, 4.15vw, 19px); line-height: 1.2; letter-spacing: -0.02em;
    white-space: nowrap; margin: 7px 0 4px;
  }
  .hero-col-der .hero-credito p { font-size: 12px; line-height: 1.35; margin: 0 0 8px; }
  .hero-col-der .hero-credito form { gap: 6px 8px; }
  .hero-col-der .hero-credito .hc-lbl { gap: 3px; }
  .hero-col-der .hero-credito .hc-lbl em { font-size: 11px; }
  .hero-col-der .hero-credito .hc-campo input { padding: 9px 8px 9px 0; }
  .hero-col-der .hero-credito form button { padding: 10px 14px; font-size: 12.5px; }
  .hero-col-der .hero-credito .hc-fuente { font-size: 11.5px; line-height: 1.3; margin-top: 8px; padding: 5px 8px; }
}

/* ==========================================================================
   06/10/2026 (5) — CELULAR: la frase de arriba ("Somos FB Inmobiliaria")
   sube casi hasta el borde del menú y se vuelve una etiqueta con brillo y un
   punto que late, para que llame la atención; y el título de abajo con menos
   interlineado para ganar lugar (pedido de Flavio). Solo en el celular.
   ========================================================================== */
@media (max-width: 700px) {
  .hero { padding-top: 12px; }
  .hero .eyebrow#hero-eyebrow {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    width: fit-content; max-width: 100%;
    margin: 0 auto 9px; padding: 6px 16px;
    font-size: 11.5px; line-height: 1.2; font-weight: 700; letter-spacing: .14em;
    color: var(--wine-dark);
    background: linear-gradient(180deg, #fff3d2 0%, #f3d9a4 55%, #e6c78b 100%);
    border: 1px solid #c9a35a; border-radius: 20px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 3px 0 #b88f44, 0 6px 10px rgba(120,84,26,.25);
  }
  .hero .eyebrow#hero-eyebrow::after {
    /* brillo que cruza la etiqueta cada tanto */
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
    transform: skewX(-18deg); animation: eyebrow-brillo 4.2s ease-in-out infinite;
  }
  @keyframes eyebrow-brillo { 0%, 62% { left: -60%; } 100% { left: 130%; } }

  .hero h1 { font-size: 28px; line-height: 1.1; text-align: center; }
  .hero h1 em { line-height: 1.1; }
  .hero-mapas { margin-top: 10px; }
  .hero-inner { gap: 14px; }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .hero .eyebrow#hero-eyebrow::after { display: none; }
}

/* ==========================================================================
   06/10/2026 (6) — CELULAR: Novedades, cifras, testimonios, cartel final y pie
   más compactos (pedido de Flavio: espacios, interlineados, tamaño de letra y
   espacio entre párrafos). Solo en el celular; no toca la compu. Los enlaces
   del pie conservan su alto para poder tocarlos con el dedo.
   ========================================================================== */
@media (max-width: 700px) {
  /* --- Novedades --- */
  .news-card { padding: 16px 16px 12px; }
  .news-head { gap: 2px 12px; }
  .news-head h3 { font-size: 18px; line-height: 1.2; }
  .news-date { font-size: 11px; }
  .news-summary { margin-top: 6px; font-size: 14.5px; line-height: 1.45; }
  .news-body { margin-top: 8px; font-size: 14.5px; line-height: 1.55; }
  .news-toggle { margin-top: 6px; font-size: 11.5px; }

  /* --- Cifras --- */
  .stats-band { padding-top: 20px; padding-bottom: 20px; }
  .stat-item { padding: 14px 10px; }
  .stat-number { font-size: 28px; }
  .stat-caption { margin-top: 5px; font-size: 10.5px; line-height: 1.3; }

  /* --- Testimonios --- */
  .testimonials-grid { gap: 12px; }
  .testimonial-card { margin: 0; padding: 16px; gap: 8px; }
  .testimonial-stars { font-size: 13px; }
  .testimonial-card blockquote { font-size: 15.5px; line-height: 1.4; }
  .testimonial-name { font-size: 14px; }
  .testimonial-role { font-size: 10.5px; margin-top: 1px; }

  /* --- Cartel final "¿Pensás vender o alquilar tu propiedad?" --- */
  .cta-band { padding: 30px 0 32px; }
  .cta-band h2 { font-size: 22px; line-height: 1.2; }
  .cta-band p { font-size: 14px; line-height: 1.45; margin: 8px 0 16px; }
  .cta-band .btn { padding: 12px 22px; }

  /* --- Pie de página --- */
  .site-footer { margin-top: 0; }
  .footer-grid { gap: 20px; padding-top: 32px; padding-bottom: 18px; }
  .footer-grid h4 { margin-bottom: 6px; }
  .footer-brand p { margin-top: 6px; line-height: 1.45; }
  .footer-grid ul { gap: 2px; }
}

/* ==========================================================================
   06/10/2026 (7) — PORTADA EN LA COMPU: la misma optimización de espacios que
   se hizo en el celular (pedido de Flavio: "replicarla en el portal para
   compu", con el mismo orden que en el celu). Solo pantallas de más de
   980 px; el celular y la tablet no cambian.
   Orden: arriba título + botones del mapa | foto + simulador; enseguida las
   propiedades destacadas a todo el ancho (el JS de index.html mueve el
   bloque); después los tres accesos, el buscador y las categorías.
   (.hero-col-der delante para ganarle a los estilos de index.html.)
   ========================================================================== */
@media (min-width: 981px) {
  /* --- Arriba: menos aire y título un poco más chico --- */
  .hero { padding-top: 26px; }
  .hero-inner { gap: 40px; padding-bottom: 26px; align-items: start; }
  .hero h1 { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.04; }
  .hero h1 em { line-height: 1.04; }
  .hero p.lede { font-size: 15.5px; line-height: 1.5; margin-top: 14px; max-width: 46ch; }

  /* Frase de arriba: la misma etiqueta dorada del celular, alineada a la izquierda */
  .hero .eyebrow#hero-eyebrow {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center;
    width: fit-content; max-width: 100%;
    margin: 0 0 14px; padding: 6px 16px;
    font-size: 11.5px; line-height: 1.2; font-weight: 700; letter-spacing: .14em;
    color: var(--wine-dark);
    background: linear-gradient(180deg, #fff3d2 0%, #f3d9a4 55%, #e6c78b 100%);
    border: 1px solid #c9a35a; border-radius: 20px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 3px 0 #b88f44, 0 6px 10px rgba(120,84,26,.25);
  }
  .hero .eyebrow#hero-eyebrow::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
    transform: skewX(-18deg); animation: eyebrow-brillo-compu 4.2s ease-in-out infinite;
  }
  @keyframes eyebrow-brillo-compu { 0%, 62% { left: -60%; } 100% { left: 130%; } }

  /* Botones del mapa: uno debajo del otro (así la columna izquierda queda
     pareja con la de la derecha), más bajos que antes */
  .hero-mapas { gap: 12px; max-width: 520px; margin-top: 18px; }
  .btn-mapa { padding: 11px 16px 10px; gap: 12px; }
  .btn-mapa .bm-ico { width: 40px; height: 40px; }
  .btn-mapa .bm-ico svg { width: 22px; height: 22px; }
  .btn-mapa .bm-txt strong { font-size: 16px; }
  .btn-mapa .bm-txt small { font-size: 12px; }
  .btn-mapa .bm-flecha { font-size: 21px; }

  /* Foto y simulador: más bajos */
  .hero-col-der { gap: 14px; }
  .hero .hero-col-der .hero-figure { aspect-ratio: 2.6/1; }
  .hero-col-der .hero-credito { padding: 14px 18px 12px; }
  .hero-col-der .hero-credito h2 { font-size: 23px; margin: 8px 0 3px; white-space: nowrap; letter-spacing: -0.01em; }
  .hero-col-der .hero-credito p { font-size: 13px; line-height: 1.35; margin: 0 0 9px; }
  .hero-col-der .hero-credito .hc-lbl em { font-size: 11.5px; }
  .hero-col-der .hero-credito .hc-campo input { padding: 10px 10px 10px 0; }
  .hero-col-der .hero-credito form button { padding: 10px 16px; font-size: 12.5px; }
  .hero-col-der .hero-credito .hc-fuente { font-size: 12px; margin-top: 8px; padding: 5px 9px; }

  /* --- Destacadas: arriba, a todo el ancho, cabecera en una sola línea --- */
  .hero .dest-bloque { margin: 6px 0 26px; }
  .hero .dest-bloque .section-head { align-items: center; margin-bottom: 14px; gap: 16px; }
  .hero .dest-bloque .section-head .eyebrow { display: none; }
  .hero .dest-bloque .section-head h2 { margin: 0; font-size: 28px; line-height: 1.15; }
  .hero .dest-bloque .btn.btn-ver-todas { padding: 11px 24px; font-size: 12.5px; }
  .hero .dest-carrusel { padding-bottom: 6px; }
  .dest-pista .property-media { aspect-ratio: 16/10; }
  .dest-pista .property-body { padding: 14px 16px 16px; gap: 6px; }
  .dest-pista .property-title { line-height: 1.2; }

  /* --- Tres accesos: bajitos, ícono al lado del título y una línea de texto --- */
  .accesos { gap: 16px; margin-bottom: 26px; }
  .acceso {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "ico titulo" "ico texto";
    column-gap: 14px; align-items: center;
    padding: 14px 18px 13px;
  }
  .acceso-ico { grid-area: ico; margin: 0; width: 44px; height: 44px; }
  .acceso-ico svg { width: 22px; height: 22px; }
  .acceso h3 { grid-area: titulo; font-size: 19px; margin: 0 0 2px; align-self: end; }
  .acceso p { grid-area: texto; font-size: 13px; line-height: 1.35; margin: 0; align-self: start; }
  .acceso-num, .acceso-go { display: none; }

  /* --- Buscador: más bajo --- */
  .quick-search { padding: 16px 20px; gap: 14px; margin-top: 0; }
  .quick-search .field { gap: 4px; }
  .quick-search .field label { font-size: 10.5px; }
  .quick-search .field select { padding: 8px 10px; font-size: 13.5px; }
  .quick-search .btn-primary { padding: 12px 26px; }

  /* --- Títulos de las secciones: más chicos y más juntos --- */
  main > .section { padding-top: 48px; padding-bottom: 48px; }
  .cabecera-home { margin-bottom: 20px; align-items: flex-end; }
  .cabecera-home .eyebrow { font-size: 11px; margin: 0; }
  .cabecera-home h2 { font-size: 28px; line-height: 1.15; margin-top: 6px; }
  .cabecera-home p { font-size: 14.5px; line-height: 1.45; margin-top: 0; }

  /* --- Categorías: tarjetas más bajas (siguen de a tres) --- */
  .cat-card { padding: 14px 18px 13px; gap: 5px; }
  .cat-card h3 { font-size: 17px; line-height: 1.2; }
  .cat-card p { font-size: 13px; line-height: 1.4; }
  .cat-card .go { display: none; }

  /* --- Novedades, cifras, testimonios --- */
  .news-card { padding: 18px 20px 14px; }
  .news-head h3 { font-size: 20px; line-height: 1.2; }
  .news-summary, .news-body { font-size: 15px; line-height: 1.5; }
  .stats-band { padding-top: 26px; padding-bottom: 26px; }
  .stat-number { font-size: 34px; }
  .testimonial-card { padding: 18px 20px; }
  .testimonial-card blockquote { font-size: 16.5px; line-height: 1.45; }

  /* --- Cartel final y pie --- */
  .cta-band { padding: 40px 0 42px; }
  .cta-band h2 { font-size: 28px; line-height: 1.2; }
  .cta-band p { margin: 8px 0 18px; }
  .site-footer { margin-top: 0; }
  .footer-grid { gap: 32px; padding: 38px 0 24px; }
  .footer-grid h4 { margin-bottom: 10px; }
  .footer-grid ul { gap: 7px; }
  .footer-bottom { padding: 14px 0; }
}
@media (min-width: 981px) and (max-width: 1199px) {
  /* Notebook chica: el título del simulador no entra en una línea */
  .hero-col-der .hero-credito h2 { white-space: normal; font-size: 21px; }
}
@media (min-width: 1200px) {
  /* Pantalla ancha: cuatro propiedades a la vista */
  .dest-pista .property-card { flex: 0 0 calc((100% - 72px) / 4); }
}
@media (min-width: 981px) and (prefers-reduced-motion: reduce) {
  .hero .eyebrow#hero-eyebrow::after { display: none; }
}

/* 06/10/2026 — Textos de la portada con tamaño elegido en el panel (Editar
   inicio): en la compu se muestran al 75 % de ese tamaño (pedido de Flavio,
   para compactar la portada). Lo aplica index.html. */
@media (min-width: 981px) { :root { --escala-panel: 0.75; } }
@media (min-width: 981px) {
  /* Cuando el título viene con tamaño del panel, cada parte maneja su propio
     interlineado (si no, el renglón toma la altura del título original y
     quedan huecos grandes entre líneas). */
  .hero h1 #hero-title-1, .hero h1 #hero-title-em { display: inline-block; }
  /* Menos alto arriba: sin el rótulo "Buscá en el mapa" (los botones ya lo dicen) */
  .hero-mapas .hm-etiqueta { display: none; }
  .hero-mapas { margin-top: 16px; }
}
@media (min-width: 981px) {
  /* 06/10/2026 — La etiqueta "Somos FB Inmobiliaria" centrada respecto del
     bloque de texto de abajo (pedido de Flavio). El bloque de la izquierda
     queda del mismo ancho que los botones del mapa, así todo se alinea. */
  .hero-inner > div:first-child { max-width: 520px; }
  .hero p.lede { max-width: none; }
  .hero .eyebrow#hero-eyebrow { display: flex; margin-left: auto; margin-right: auto; }
}

/* 06/10/2026 — Carrusel de destacadas: sin el cartelito "FICHA FB-…" sobre la
   foto (pedido de Flavio: los códigos largos tapaban la propiedad). Queda la
   etiqueta del tipo (Casas/Deptos, etc.). En el listado de Propiedades sigue. */
.dest-pista .property-code { display: none; }
/* Ampliado el mismo día a pedido de Flavio: tampoco en el listado de
   Propiedades ni en las páginas de categoría (en ninguna tarjeta pública). */
.property-card .property-code { display: none; }

/* 06/10/2026 — En la compu, la primera línea del título ("Detrás de cada
   propiedad, una historia") centrada, igual que la etiqueta dorada de arriba
   (pedido de Flavio). La segunda línea sigue a la izquierda. */
@media (min-width: 981px) {
  .hero h1 #hero-title-1 { display: block; text-align: center; }
  .hero h1 #hero-title-1 + br { display: none; } /* ya baja de renglón solo */
}

/* 06/10/2026 — PROPIEDADES: los botones del mapa con el mismo estilo y texto
   que la portada (pedido de Flavio), lado a lado a la derecha del título.
   En el celular toman la forma de la portada en el celular (ícono arriba,
   texto corto). */
.propiedades-toolbar .mapa-destacado { display: flex; align-items: stretch; }
.propiedades-toolbar .btn-mapa { margin-bottom: 5px; }
@media (min-width: 701px) {
  .propiedades-toolbar .mapa-destacado { flex-direction: row; flex-wrap: nowrap; gap: 12px; justify-content: flex-end; }
  .propiedades-toolbar .btn-mapa { flex: 0 1 auto; width: auto; padding: 9px 14px 8px; gap: 10px; }
  .propiedades-toolbar .btn-mapa .bm-ico { width: 36px; height: 36px; }
  .propiedades-toolbar .btn-mapa .bm-ico svg { width: 20px; height: 20px; }
  .propiedades-toolbar .btn-mapa .bm-txt strong { font-size: 15px; white-space: nowrap; }
  .propiedades-toolbar .btn-mapa .bm-txt small { font-size: 11.5px; white-space: nowrap; }
  .propiedades-toolbar .btn-mapa .bm-flecha { font-size: 19px; }
}
/* Pantallas medianas: texto corto y sin la línea chica, para que entren al lado del título */
@media (min-width: 701px) and (max-width: 1199px) {
  .propiedades-toolbar .btn-mapa .bm-largo, .propiedades-toolbar .btn-mapa small { display: none; }
  .propiedades-toolbar .btn-mapa .bm-corto { display: inline; }
}
@media (max-width: 700px) {
  .propiedades-toolbar .mapa-destacado { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
}
/* Cuando se filtró por zona del mapa, el aviso "Cerca de la zona marcada"
   va en su propio renglón, debajo de los botones (antes los empujaba y
   tapaban el título). */
.propiedades-toolbar .mapa-destacado { flex-wrap: wrap; }
.propiedades-toolbar .mapa-destacado .filtro-radio-activo { flex: 0 0 100%; justify-content: flex-end; white-space: nowrap; margin: 0; }
.propiedades-toolbar .mapa-destacado .filtro-radio-activo[hidden] { display: none; }
@media (min-width: 701px) {
  .propiedades-toolbar { grid-template-columns: minmax(250px, 1fr) auto; }
  .propiedades-toolbar .mapa-destacado .filtro-radio-activo { display: flex; align-items: center; gap: 6px; width: auto; flex-basis: 100%; padding: 4px 10px; font-size: 12.5px; }
}
@media (max-width: 700px) {
  .propiedades-toolbar .mapa-destacado .filtro-radio-activo { grid-column: 1 / -1; justify-content: center; white-space: normal; }
}

/* ==========================================================================
   06/10/2026 (8) — PORTADA EN LA COMPU, segunda vuelta más compacta (pedido
   de Flavio: "achicar cuadros, textos, interlineados y espaciados para que se
   vea aunque sea un poco el carrusel" en una notebook de 1366×768).
   ========================================================================== */
@media (min-width: 981px) {
  :root { --escala-panel: 0.68; }
  .hero { padding-top: 14px; }
  .hero-inner { gap: 32px; padding-bottom: 14px; }

  /* Izquierda */
  .hero .eyebrow#hero-eyebrow { margin-bottom: 8px; padding: 4px 14px; font-size: 10.5px; }
  .hero h1 { line-height: 1.02; }
  .hero h1 #hero-title-1, .hero h1 #hero-title-em { line-height: 1.08 !important; }
  .hero p.lede { font-size: 13px !important; line-height: 1.42; margin-top: 8px; }
  .hero-mapas { gap: 8px; margin-top: 12px; }
  .btn-mapa { padding: 7px 14px 6px; gap: 10px; margin-bottom: 3px; }
  .btn-mapa .bm-ico { width: 32px; height: 32px; }
  .btn-mapa .bm-ico svg { width: 18px; height: 18px; }
  .btn-mapa .bm-txt strong { font-size: 14.5px; }
  .btn-mapa .bm-txt small { font-size: 11px; }

  /* Derecha: foto más baja y simulador más compacto */
  .hero-col-der { gap: 10px; }
  .hero .hero-col-der .hero-figure { aspect-ratio: 3.4/1; }
  .hf-sucursal { padding-top: 6px; padding-bottom: 6px; }
  .hero-col-der .hero-credito { padding: 10px 16px 9px; }
  .hero-col-der .hero-credito .hero-credito-badge,
  .hero-col-der .hero-credito .hc-badge-sim { font-size: 9.5px; padding-top: 2px; padding-bottom: 2px; }
  .hero-col-der .hero-credito h2 { font-size: 20px; margin: 6px 0 2px; }
  .hero-col-der .hero-credito p { font-size: 12px; line-height: 1.3; margin: 0 0 6px; }
  .hero-col-der .hero-credito .hc-lbl { gap: 2px; }
  .hero-col-der .hero-credito .hc-lbl em { font-size: 11px; }
  .hero-col-der .hero-credito .hc-campo input { padding: 7px 8px 7px 0; font-size: 14px; }
  .hero-col-der .hero-credito form button { padding: 8px 14px; font-size: 12px; }
  .hero-col-der .hero-credito .hc-fuente { font-size: 11px; line-height: 1.3; margin-top: 6px; padding: 4px 8px; }

  /* Destacadas: cabecera más baja */
  .hero .dest-bloque { margin: 2px 0 22px; }
  .hero .dest-bloque .section-head { margin-bottom: 10px; }
  .hero .dest-bloque .section-head h2 { font-size: 24px; }
  .hero .dest-bloque .btn.btn-ver-todas { padding: 8px 18px; font-size: 12px; }
}