/*
 * Kavia design system — Lavanda + Pino.
 *
 * Reparto 60/30/10:
 *   60% — neutro frío: --color-bg lienzo, --color-surface superficies
 *   30% — lavanda y índigo: --color-focal-soft masas claras, --color-focal acciones
 *   10% — verde pino --color-accent: el precio y UNA acción de acento por pantalla
 *
 * Reglas, verificadas por test/design_token_discipline_test.rb:
 *   - Todo color sale de un token --color-*. Ningún hex fuera de :root / [data-theme]
 *   - Todo padding/margin/gap sale de la escala --space-* (múltiplos de 4)
 *   - Mobile first: probar 390 / 768 / 1024 / 1440
 *
 * Escala de controles (única, sin excepciones):
 *   xs 20px  dato, nunca clickeable       texto 11/600  radio 4
 *   sm 30px  chip, filtro, acción de fila texto 12/600  radio 6
 *   md 38px  por defecto y campos         texto 13/600  radio 8
 *   lg 46px  UNA acción por pantalla      texto 15/700  radio 8
 *   En móvil: sm→36, md→44, lg→52. El piso táctil manda.
 */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;700&display=swap');

:root {
  /* ── 60% · superficies ─────────────────────────────────────────── */
  --color-bg: #F8F7FC;
  --color-surface: #FFFFFF;
  --color-surface-soft: #F0EEF9;
  --color-surface-strong: #E4E1F4;
  --color-surface-inset: #F2F0FA;
  --color-border: #E6E3F1;
  --color-border-strong: #C0BAE2;

  /* Texto */
  --color-text: #1A182B;
  --color-text-soft: #454162;
  --color-text-muted: #666280;
  --color-text-faint: #918DA8;
  --color-text-disabled: #ADA9C0;

  /* ── 30% · lavanda e índigo ────────────────────────────────────── */
  --color-focal: #4B2FD6;
  --color-focal-hover: #3D22C3;
  --color-focal-contrast: #FFFFFF;
  --color-focal-ink: #4E37BE;
  --color-focal-soft: #CDC5F7;
  --color-focal-line: #8D80CB;
  --color-focal-dim: #D0CAEF;
  --color-focal-rule: #8372D6;

  /* ── 10% · verde pino ──────────────────────────────────────────── */
  --color-accent: #1E6B4A;
  --color-accent-hover: #17583C;
  --color-accent-contrast: #FFFFFF;
  --color-accent-ink: #1A5C3E;
  --color-accent-soft: #DDEDE4;
  --color-accent-tint: #F6FBF8;

  /* ── Semánticos, fuera del 60/30/10 ────────────────────────────── */
  --color-alert: #B3261E;
  --color-alert-ink: #7F1D18;
  --color-alert-soft: #FBEAE8;
  --color-alert-border: #E0B4B0;
  --color-warn: #A16207;
  --color-warn-ink: #7A4E06;
  --color-warn-soft: #FBF0DC;
  --color-success: #1E6B4A;

  /* Placa bajo las ilustraciones de contorno negro. En claro no hace falta
     ninguna: la superficie ya es blanca. */
  --color-illustration-plate: transparent;

  /* Capas sobre foto */
  --color-overlay: rgba(26, 24, 43, 0.42);
  --color-scrim: rgba(26, 24, 43, 0.70);
  --color-scrim-soft: rgba(26, 24, 43, 0.62);
  /* El visor de fotos es oscuro en los dos temas —la foto tiene que ser lo
     único con brillo en la pantalla—, así que sus controles tampoco siguen al
     tema: quedan claros siempre, como los del scrim del hero. */
  --color-scrim-deep: rgba(16, 15, 26, 0.96);
  --color-glass-on-scrim: rgba(255, 255, 255, 0.94);
  --color-on-glass: #1A182B;
  --color-glass: rgba(255, 255, 255, 0.94);
  /* Sobre el scrim del hero el fondo es oscuro en los dos temas. */
  --color-on-scrim: #FFFFFF;

  /* ── Tipografía ────────────────────────────────────────────────── */
  --font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --text-11: 0.6875rem;
  --text-12: 0.75rem;
  --text-13: 0.8125rem;
  --text-15: 0.9375rem;
  --text-18: 1.125rem;
  --text-24: 1.5rem;
  --text-34: 2.125rem;

  --tracking-tight: -0.03em;
  --tracking-tighter: -0.04em;
  --tracking-caps: 0.12em;

  /* ── Espaciado · múltiplos de 4 ────────────────────────────────── */
  --space-half: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Alturas de control ────────────────────────────────────────── */
  --control-xs: 20px;
  --control-sm: 30px;
  --control-md: 38px;
  --control-lg: 46px;
  --control-inner: 32px;
  --header-h: 56px;

  /* ── Radios ────────────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ── Sombras ───────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(26, 24, 43, 0.04);
  --shadow-md: 0 1px 2px rgba(26, 24, 43, 0.04), 0 10px 24px rgba(26, 24, 43, 0.07);
  --shadow-lg: 0 10px 22px rgba(26, 24, 43, 0.10);
  --shadow-drawer: -20px 0 50px rgba(26, 24, 43, 0.20);
  --shadow-bar: 0 -6px 20px rgba(26, 24, 43, 0.08);

  /* ── Movimiento ────────────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-smooth: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ────────────────────────────────────────────────────── */
  --layout-max: 1280px;
  --layout-pad: var(--space-4);
  --sidebar-w: 340px;
  --drawer-w: 400px;
}

[data-theme="dark"] {
  --color-bg: #12111C;
  --color-surface: #1B1A29;
  --color-surface-soft: #232236;
  --color-surface-strong: #2C2A43;
  --color-surface-inset: #232236;
  --color-border: #2E2C45;
  --color-border-strong: #423F63;

  --color-text: #F2F1F8;
  --color-text-soft: #CFCCE2;
  --color-text-muted: #A9A5C2;
  --color-text-faint: #8B87A6;
  --color-text-disabled: #6E6A88;

  --color-focal: #A292F1;
  --color-focal-hover: #B7AAF7;
  --color-focal-contrast: #12111C;
  --color-focal-ink: #B0A3F0;
  --color-focal-soft: #2F2463;
  --color-focal-line: #7064AB;
  --color-focal-dim: #312A4F;
  --color-focal-rule: #6659A6;

  --color-accent: #5FBF92;
  --color-accent-hover: #7BD0A8;
  --color-accent-contrast: #12111C;
  --color-accent-ink: #9EE0BE;
  --color-accent-soft: #1B3B2C;
  --color-accent-tint: #172C22;

  --color-alert: #F2837B;
  --color-alert-ink: #F7ADA7;
  --color-alert-soft: #3A2020;
  --color-alert-border: #6B3A36;
  --color-warn: #E0A94A;
  --color-warn-ink: #F0CB8B;
  --color-warn-soft: #3A2E17;
  --color-success: #5FBF92;

  --color-illustration-plate: #E8E5F4;

  --color-glass: rgba(27, 26, 41, 0.94);
  --color-on-scrim: #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 22px rgba(0, 0, 0, 0.5);
  --shadow-drawer: -20px 0 50px rgba(0, 0, 0, 0.6);
  --shadow-bar: 0 -6px 20px rgba(0, 0, 0, 0.5);
}

/* En móvil sube el piso táctil. Los badges (xs) no son clickeables y no suben. */
@media (max-width: 48rem) {
  :root {
    --control-sm: 36px;
    --control-md: 44px;
    --control-lg: 52px;
  }
}

@media (min-width: 48rem) {
  :root {
    --layout-pad: var(--space-6);
  }
}

@media (min-width: 75rem) {
  :root {
    --layout-pad: var(--space-10);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* El pie va abajo de la pantalla aunque la página tenga poco contenido: en las
   pantallas cortas —"Mis propiedades" con un aviso, una cola de revisión
   vacía— quedaba flotando a media altura con el fondo de la página abajo.
   Columna flex y `main` que crece: el margen del pie entra en el cálculo del
   espacio libre, así que no aparece scroll de más en las páginas cortas. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-15);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* `0 auto`, no `1 0%`: la base es el alto del contenido y nunca se encoge, así
   que una página larga sigue midiendo lo que mide y sólo estira cuando sobra. */
main {
  flex: 1 0 auto;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-heading);
  line-height: 1.25;
  text-wrap: pretty;
}

h1 { font-size: var(--text-24); font-weight: 700; letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-18); font-weight: 600; letter-spacing: -0.02em; }
h3 { font-size: var(--text-15); font-weight: 600; }

p { margin: 0; }

a {
  color: var(--color-focal);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover { color: var(--color-focal-hover); }

img { max-width: 100%; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focal);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════════ */

.layout {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: 0 var(--layout-pad);
}

.page {
  padding: var(--space-6) 0 var(--space-12);
}

.page--tight {
  padding: var(--space-4) 0 var(--space-8);
}

.page__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}

.page__title {
  font-size: var(--text-24);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}

.page__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-12);
  color: var(--color-text-muted);
}

.page__meta strong { color: var(--color-text); }

.page__meta-dot {
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background-color: var(--color-border-strong);
}

.page__meta-cta { color: var(--color-focal); font-weight: 600; }

/* Título arriba, estado general debajo. Apilado en todos los anchos: el estado
   ("2 de 1 cupos usados · 1 publicada") es una frase, no un subtítulo corto, y
   al lado del H1 competía con él por la misma línea de lectura. */
.page__headline {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.eyebrow {
  font-size: var(--text-11);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (max-width: 48rem) {
  .page__head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER · NAV · FOOTER · FLASH
   ═══════════════════════════════════════════════════════════════════ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-h);
  padding: 0 var(--layout-pad);
}

/* El logotipo: símbolo (.brand__mark) + palabra (.brand__word), las dos
   piezas del mismo lockup. Van en el header y en el pie con una sola regla.

   Son máscaras de alfa, no <img>: el PNG aporta la silueta y el color lo pone
   background-color: currentColor. Esa es la única forma de que el logo siga
   valiendo un token —morado sobre fondo claro, blanco sobre el focal del pie,
   lavanda en tema oscuro— con un archivo por pieza en vez de cuatro. El hueco
   del arco queda transparente, así que sobre el pie se invierte solo.

   Los aspect-ratio son las cajas del original (408×419 y 676×200) y el alto
   de la palabra es 200/419 del símbolo: así se conserva la proporción exacta
   del lockup sin depender del recorte del archivo.

   .wordmark contiene SOLO el texto "Kavia" —oculto a la vista, presente para
   el lector de pantalla y para landing_page_test:9, que compara el contenido
   del nodo con esa cadena exacta. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-focal);
}

.brand:hover { color: var(--color-focal); }

.brand__mark,
.brand__word {
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  flex-shrink: 0;
}

.brand__mark {
  height: 26px;
  aspect-ratio: 408 / 419;
  -webkit-mask-image: url("/assets/kavia-mark-b7902465.png");
  mask-image: url("/assets/kavia-mark-b7902465.png");
}

.brand__word {
  height: 12px;
  aspect-ratio: 676 / 200;
  -webkit-mask-image: url("/assets/kavia-wordmark-bc13654b.png");
  mask-image: url("/assets/kavia-wordmark-bc13654b.png");
}

/* .wordmark es sólo el gancho del test. Todo el estilo vive en .brand__word. */
.wordmark {}

.site-footer .brand { color: var(--color-focal-contrast); }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-13);
}

.site-nav__user {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-13);
  font-weight: 600;
  color: var(--color-text);
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-strong);
  color: var(--color-focal);
  font-size: var(--text-11);
  font-weight: 700;
  flex-shrink: 0;
}

.avatar--lg { width: 38px; height: 38px; font-size: var(--text-13); }
.avatar--solid { background-color: var(--color-focal); color: var(--color-focal-contrast); }

.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--control-md);
  height: var(--control-md);
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text);
  cursor: pointer;
}

.site-nav__overlay { display: none; }

@media (max-width: 48rem) {
  .mobile-menu-toggle { display: inline-flex; }

  /* En pantallas chicas la marca es sólo el signo. La palabra no se borra:
     se oculta visualmente, porque .brand__mark es aria-hidden y sin el texto
     el link del logo se quedaría sin nombre accesible. En el pie sigue
     visible, por eso el selector está acotado al header. */
  .site-header .brand__word {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .site-nav {
    position: fixed;
    top: 0;
    right: -300px;
    z-index: 41;
    width: 280px;
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-drawer);
    transition: right var(--transition-smooth);
  }

  .site-nav--open { right: 0; }

  .site-nav__user {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
  }

  .site-nav .btn { width: 100%; justify-content: flex-start; }

  .site-nav__overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background-color: var(--color-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-smooth);
  }

  .site-nav__overlay--visible { opacity: 1; pointer-events: auto; }
}

.flash {
  padding: var(--space-3) 0;
  background-color: var(--color-surface-soft);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-13);
  color: var(--color-text-soft);
}

.site-footer {
  margin-top: var(--space-12);
  padding: var(--space-8) 0 var(--space-6);
  background-color: var(--color-focal);
  color: var(--color-focal-contrast);
  font-size: var(--text-12);
}

.site-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-10);
}

.site-footer__blurb {
  max-width: 34ch;
  margin-top: var(--space-2);
  color: var(--color-focal-dim);
}

.site-footer__cols {
  display: flex;
  gap: var(--space-12);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Sobre el focal sólido va --color-focal-dim, no --color-focal-line:
   line es el tono medio para fondos claros (íconos, reglas) y no contrasta
   contra el focal. Ver también .site-footer__bottom. */
.site-footer__col-title {
  font-size: var(--text-11);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-focal-dim);
}

.site-footer a { color: var(--color-surface-strong); }
.site-footer a:hover { color: var(--color-focal-contrast); }

.site-footer__bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-focal-rule);
  color: var(--color-focal-dim);
}

@media (max-width: 48rem) {
  .site-footer__top { flex-direction: column; gap: var(--space-6); }

  /* Las columnas se apoyan en los dos bordes del pie. Con `flex: 1` partían el
     ancho por la mitad y quedaban las dos alineadas a la izquierda de su mitad:
     "Publicar" arrancaba en el 50% y su texto corto dejaba el último tercio de
     la pantalla vacío. Sin flex, cada una ocupa lo suyo y space-between las
     manda a los extremos. */
  .site-footer__cols { justify-content: space-between; width: 100%; gap: var(--space-4); }
  .site-footer__col { min-width: 0; }

  /* El límite de 34ch es para una columna angosta al lado del logo. Apilado
     ocupa el ancho completo como todo lo demás. */
  .site-footer__blurb { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   BOTONES — una sola escala, cuatro escalones
   ═══════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-md);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-13);
  font-weight: 600;
  line-height: 1;
  /* Un botón de fila nunca parte su etiqueta en dos líneas: si no entra,
     la etiqueta es demasiado larga y se acorta, no se envuelve. */
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}

.btn--lg {
  height: var(--control-lg);
  padding: 0 var(--space-5);
  font-size: var(--text-15);
  font-weight: 700;
}

.btn--sm {
  height: var(--control-sm);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-12);
}

.btn--icon { width: var(--control-md); padding: 0; }
.btn--sm.btn--icon { width: var(--control-sm); }
.btn--lg.btn--icon { width: var(--control-lg); }

.btn--block { display: flex; width: 100%; }

/* El acento: UNA acción por pantalla. Puede repetirse por fila si es la misma. */
.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
}
.btn--accent:hover {
  background-color: var(--color-accent-hover);
  color: var(--color-accent-contrast);
}

.btn--focal {
  background-color: var(--color-focal);
  color: var(--color-focal-contrast);
}
.btn--focal:hover {
  background-color: var(--color-focal-hover);
  color: var(--color-focal-contrast);
}

.btn--outline {
  border-color: var(--color-border-strong);
  background-color: var(--color-surface);
  color: var(--color-focal);
}
.btn--outline:hover {
  background-color: var(--color-surface-soft);
  color: var(--color-focal-hover);
}

/* Pastilla clara para usar sobre foto. No es el acento: el acento sigue
   siendo una sola acción por pantalla. */
.btn--glass {
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  color: var(--color-focal);
}
.btn--glass:hover {
  background-color: var(--color-surface-soft);
  color: var(--color-focal-hover);
}

.btn--ghost { color: var(--color-text-muted); }
.btn--ghost:hover {
  background-color: var(--color-surface-soft);
  color: var(--color-text);
}

/* Destructivo: nunca relleno. No debe ser tan fácil de apretar como aprobar. */
.btn--danger {
  border-color: var(--color-alert-border);
  background-color: var(--color-surface);
  color: var(--color-alert);
}
.btn--danger:hover { background-color: var(--color-alert-soft); }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

@media (max-width: 48rem) {
  /* Fuera de las barras de chips, sm sube al piso táctil. */
  .btn-row .btn--sm,
  .data-table .btn--sm { height: var(--control-md); font-size: var(--text-13); }
  .btn-row .btn--sm.btn--icon,
  .data-table .btn--sm.btn--icon { width: var(--control-md); }
}

/* ═══════════════════════════════════════════════════════════════════
   BADGES (xs, nunca clickeables) Y CHIPS (sm, clickeables)
   ═══════════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--control-xs);
  padding: 0 var(--space-2);
  border-radius: var(--radius-xs);
  background-color: var(--color-surface-soft);
  color: var(--color-text-soft);
  font-size: var(--text-11);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.badge--accent { background-color: var(--color-accent-soft); color: var(--color-accent-ink); font-weight: 700; }
.badge--warn   { background-color: var(--color-warn-soft);   color: var(--color-warn-ink);   font-weight: 700; }
.badge--alert  { background-color: var(--color-alert-soft);  color: var(--color-alert-ink);  font-weight: 700; }
.badge--draft  { background-color: var(--color-surface-soft); color: var(--color-text-soft); font-weight: 700; }
.badge--focal  { background-color: var(--color-surface-soft); color: var(--color-focal);      font-weight: 700; }
.badge--glass  { background-color: var(--color-glass);       color: var(--color-focal);      font-weight: 700; }
.badge--scrim  { background-color: var(--color-scrim);       color: var(--color-focal-contrast); }
.badge--solid  { background-color: var(--color-accent);      color: var(--color-accent-contrast); font-weight: 700; }

.badge__dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background-color: currentColor;
  flex-shrink: 0;
}

.badge-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-full);
  background-color: var(--color-focal);
  color: var(--color-focal-contrast);
  font-size: var(--text-11);
  font-weight: 700;
  line-height: 1;
}

.counter--accent { background-color: var(--color-accent); color: var(--color-accent-contrast); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-sm);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text-soft);
  font-size: var(--text-12);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}

.chip:hover { border-color: var(--color-focal); color: var(--color-focal); }

.chip--on,
.chip input:checked + .chip__label,
.chip--active {
  border-color: var(--color-focal);
  background-color: var(--color-focal);
  color: var(--color-focal-contrast);
}

.chip--soft {
  border-color: transparent;
  background-color: var(--color-surface-strong);
  color: var(--color-focal-ink);
}

.chip--static { cursor: default; }
.chip--static:hover { border-color: var(--color-border-strong); color: var(--color-text-soft); }

.chip-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════════
   SEGMENTADO (operación, dormitorios, moneda, lista/mapa)
   ═══════════════════════════════════════════════════════════════════ */

.segmented {
  display: inline-flex;
  align-items: center;
  gap: var(--space-half);
  height: var(--control-md);
  padding: var(--space-half);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-inset);
}

.segmented--sm { height: var(--control-sm); }
.segmented--fill { display: flex; width: 100%; }

.segmented__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.segmented__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-inner);
  padding: 0 var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: var(--text-12);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.segmented--fill .segmented__button { flex: 1; }
.segmented--sm .segmented__button { height: 26px; }

.segmented__radio:checked + .segmented__button {
  background-color: var(--color-focal);
  color: var(--color-focal-contrast);
}

/* Variante clara: la pestaña activa es blanca, no índigo (Lista / Mapa). */
.segmented--light .segmented__radio:checked + .segmented__button {
  background-color: var(--color-surface);
  color: var(--color-text);
}

.segmented__radio:focus-visible + .segmented__button {
  outline: 2px solid var(--color-focal);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   FORMULARIOS
   ═══════════════════════════════════════════════════════════════════ */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.field__label {
  font-size: var(--text-13);
  font-weight: 600;
  color: var(--color-text-soft);
}

.field__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.field__hint {
  font-size: var(--text-12);
  color: var(--color-text-faint);
}

/* Un hint que dejó de ser cierto. El autocompletado de direcciones puede no
   cargar —cuota agotada, red, bloqueador—, y ahí el texto que promete que los
   campos se completan solos pasa a ser una instrucción de completarlos a mano.
   Tinta de advertencia, no de error: no hay nada mal cargado todavía. */
.field__hint--warning {
  color: var(--color-warn-ink);
  font-weight: 600;
}

.field__error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-12);
  color: var(--color-alert);
}

.control,
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="number"],
.field input[type="password"],
.field input[type="search"],
.field select,
.field textarea {
  width: 100%;
  height: var(--control-md);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-13);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.field textarea,
textarea.control {
  height: auto;
  min-height: 112px;
  padding: var(--space-3);
  line-height: 1.6;
  resize: vertical;
}

.field select,
select.control {
  appearance: none;
  padding-right: var(--space-8);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.control::placeholder,
.field input::placeholder,
.field textarea::placeholder { color: var(--color-text-faint); }

.control:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-focal);
  box-shadow: 0 0 0 3px var(--color-surface-strong);
}

.control--error,
.field--error .control,
.field--error input,
.field--error select,
.field--error textarea {
  border-color: var(--color-alert);
  border-width: 1.5px;
}

.field--error .field__label { color: var(--color-alert); }

/* Campo con prefijo fijo (moneda) */
.control-group {
  display: flex;
  align-items: center;
  height: var(--control-md);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  overflow: hidden;
}

.control-group__prefix {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--space-3);
  border-right: 1px solid var(--color-border-strong);
  background-color: var(--color-surface-inset);
  color: var(--color-focal);
  font-size: var(--text-12);
  font-weight: 600;
}

.control-group .control,
.control-group input,
.control-group select {
  height: 100%;
  border: none;
  border-radius: 0;
  font-weight: 600;
}

.control-group .control:focus { box-shadow: none; }

/* Dos clases, porque `.field select` (0,1,1) le gana a `.control-group__prefix`
   (0,1,0) y le pisaba el fondo y el color: el selector de moneda terminaba
   blanco sobre blanco, indistinguible del campo de precio que tiene al lado. */
.control-group .control-group__prefix {
  background-color: var(--color-surface-inset);
  color: var(--color-focal);
}

/* El autocompletado de direcciones de Google monta su lista con append al
   <body>, fuera de nuestro árbol y sin una sola clase nuestra. Sin estas
   reglas aparece en Roboto, con el resaltado azul por defecto, encima de un
   formulario en Archivo y lavanda. La atribución (.pac-container::after) se
   deja intacta: es requisito de los términos de la API. */
.pac-container {
  z-index: 60;
  margin-top: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-md);
  font-family: var(--font-body);
}

.pac-item {
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--text-13);
  line-height: 1.5;
  cursor: pointer;
}

.pac-item:hover,
.pac-item-selected { background-color: var(--color-surface-soft); }

.pac-item-query { color: var(--color-text); font-size: var(--text-13); font-weight: 600; }
.pac-matched { font-weight: 700; }
.pac-icon { display: none; }

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.field-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.field-range {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.field-range__dash {
  width: 10px;
  height: 1px;
  background-color: var(--color-border-strong);
  flex-shrink: 0;
}

.form-errors {
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-alert);
  border-radius: var(--radius-md);
  background-color: var(--color-alert-soft);
  color: var(--color-alert-ink);
  font-size: var(--text-13);
}

.form-errors ul { margin: var(--space-2) 0 0; padding-left: var(--space-4); }

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Checkbox de comodidad renderizado como chip */
.choice { position: relative; display: inline-flex; }

.choice input[type="checkbox"],
.choice input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.choice__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-sm);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text-soft);
  font-size: var(--text-12);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}

.choice__label:hover { border-color: var(--color-focal); }

.choice input:checked + .choice__label {
  border-color: var(--color-focal);
  background-color: var(--color-focal);
  color: var(--color-focal-contrast);
}

.choice input:focus-visible + .choice__label {
  outline: 2px solid var(--color-focal);
  outline-offset: 2px;
}

.choice__check { display: none; }
.choice input:checked + .choice__label .choice__check { display: block; }

/* Botonera 1+ / 2+ / 3+ / 4+ */
.choice-group {
  display: flex;
  gap: var(--space-2);
}

.choice-group .choice { flex: 1; }
.choice-group .choice__label { width: 100%; justify-content: center; height: 34px; }

/* Declaración de titularidad. No es una píldora de .choice: el texto es una
   frase que tiene que poder cortar en dos renglones, y la casilla queda
   nativa porque acá el estado marcado es el dato, no una decoración. El label
   envuelve todo, así que se marca tocando cualquier parte del bloque. */
.declaration {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-soft);
  color: var(--color-text-soft);
  font-size: var(--text-13);
  line-height: 1.5;
  cursor: pointer;
  transition: border-color var(--transition-fast),
              background-color var(--transition-fast);
}

.declaration:hover { border-color: var(--color-accent); }

/* Declarada, el bloque pasa a pino: es la misma señal que el aviso lleva
   después en la ficha pública. */
.declaration:has(input:checked) {
  border-color: var(--color-accent);
  background-color: var(--color-accent-tint);
  color: var(--color-accent-ink);
}

.declaration__box {
  flex-shrink: 0;
  margin-top: var(--space-1);
  accent-color: var(--color-accent);
}

@media (max-width: 48rem) {
  .field-row,
  .field-row--3,
  .field-row--4 { grid-template-columns: 1fr; }

  /* Un input de 16px es lo único que evita el zoom automático en iOS. */
  .control,
  .field input,
  .field select,
  .field textarea { font-size: 1rem; }

  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   PANELES · NOTAS · VACÍOS
   ═══════════════════════════════════════════════════════════════════ */

.panel {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.panel--flush { padding: 0; overflow: hidden; }
.panel--raised { box-shadow: var(--shadow-md); }
.panel--focus { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }

.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.panel__title {
  font-size: var(--text-18);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.note {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-soft);
  color: var(--color-text-soft);
  font-size: var(--text-13);
}

.note--accent { background-color: var(--color-accent-soft); color: var(--color-accent-ink); }
.note--alert  { background-color: var(--color-alert-soft);  color: var(--color-alert-ink); }
.note--warn   { background-color: var(--color-warn-soft);   color: var(--color-warn-ink); }

.note__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.note__icon { flex-shrink: 0; }

.empty {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
}

.empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-soft);
  color: var(--color-focal-line);
  flex-shrink: 0;
}

.empty__body { flex: 1; min-width: 0; }

.empty__title {
  font-size: var(--text-18);
  font-weight: 600;
  color: var(--color-text);
}

.empty__lead { margin-top: var(--space-1); font-size: var(--text-13); }
.empty__chips { margin-top: var(--space-3); }

@media (max-width: 48rem) {
  .empty {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6);
  }
}

/* El vacío de la búsqueda pública es la única pantalla donde el usuario no
   encontró lo que vino a buscar. Ahí el ícono chico no alcanza: la ilustración
   va centrada y arriba, con los filtros que puede aflojar debajo. Va después
   del media query de .empty a propósito, para ganarle también en móvil. */
.empty--illustrated {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
  padding: var(--space-10) var(--space-6) var(--space-12);
}

/* El PNG lleva un margen transparente a la izquierda para quedar ópticamente
   centrado, así que es más ancho que el dibujo: el max-width lo compensa para
   que el dibujo siga midiendo los mismos 240px de siempre. */
.empty__art {
  width: 100%;
  max-width: 268px;
  height: auto;
  border-radius: var(--radius-lg);
}

/* La ilustración está dibujada con contorno negro y fondo transparente: sobre
   la superficie oscura el contorno se pierde, así que ahí se apoya en una
   placa clara. */
[data-theme="dark"] .empty__art {
  padding: var(--space-4);
  background-color: var(--color-illustration-plate);
}

.empty--illustrated .empty__body { flex: none; max-width: 42ch; }
.empty--illustrated .empty__chips { justify-content: center; }

.empty__actions {
  justify-content: center;
  margin-top: var(--space-5);
}

/* ═══════════════════════════════════════════════════════════════════
   TARJETA DE PROPIEDAD Y GRILLA
   ═══════════════════════════════════════════════════════════════════ */

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 37.5rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem)   { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 90rem)   { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

/* Toda la tarjeta es el link. No lleva botón adentro: un botón dentro de un
   link es un competidor, no una ayuda. */
.card__link {
  display: block;
  color: inherit;
}

.card__link:hover { color: inherit; }

/* overflow: hidden porque .photo-backdrop se agranda para desenfocar: sin
   recortarlo acá, el fondo de la foto se derrama sobre el precio y el título. */
.card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background-color: var(--color-focal-soft);
  overflow: hidden;
}

.card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* .listing__eyebrow = el grupo de badges sobre la foto (operación · tipo). */
.listing__eyebrow,
.card__badges {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  display: flex;
  gap: var(--space-1);
  margin: 0;
}

.card__fav {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--control-sm);
  height: var(--control-sm);
  border: none;
  border-radius: var(--radius-full);
  background-color: var(--color-glass);
  color: var(--color-text-muted);
  cursor: pointer;
}

.card__count {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
}

.card__body { padding: var(--space-3) var(--space-4) var(--space-4); }

.card__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.listing__price {
  margin: 0;
  color: var(--color-accent);
  font-size: var(--text-24);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.card__unit {
  font-size: var(--text-11);
  font-weight: 600;
  color: var(--color-text-faint);
  white-space: nowrap;
}

.card__title {
  margin: var(--space-2) 0 0;
  font-size: var(--text-15);
  font-weight: 600;
  line-height: 1.35;
}

.listing__location {
  margin: var(--space-1) 0 0;
  font-size: var(--text-13);
  color: var(--color-text-muted);
}

.card__facts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.card__agent {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-surface-soft);
  font-size: var(--text-12);
  color: var(--color-text-muted);
}

.card__agent .avatar { width: 20px; height: 20px; font-size: 0.5625rem; }

.card--highlighted {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-soft);
}

@media (max-width: 48rem) {
  .card__media { aspect-ratio: 16 / 11; }
  .card__fav { width: 36px; height: 36px; }
}

/* Tarjeta horizontal — "Parecidas en …" */
.card--row { display: flex; }
.card--row .card__media { width: 120px; aspect-ratio: auto; flex-shrink: 0; }
.card--row .card__body { padding: var(--space-3) var(--space-4); }
.card--row .listing__price { font-size: var(--text-18); letter-spacing: var(--tracking-tight); }
.card--row .card__title { margin-top: var(--space-1); font-size: var(--text-13); }

@media (max-width: 48rem) {
  .card--row .card__media { width: 92px; }
}

/* ═══════════════════════════════════════════════════════════════════
   BARRA DE FILTROS
   ═══════════════════════════════════════════════════════════════════ */

/* Hero tipo portada: tarjeta alta y redondeada, foto real de fondo, scrim y
   el texto encima. El degradado es el piso: si no hay foto se ve él solo. */
.search-hero {
  padding: var(--space-6) var(--layout-pad) var(--space-2);
}

.search-hero__inner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 340px;
  padding: var(--space-10) var(--space-8);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-image: linear-gradient(135deg, var(--color-focal), var(--color-focal-hover));
}

.search-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.search-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Más opaco a la izquierda, donde vive el texto; se abre a la derecha para
   que la foto respire. */
.search-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(100deg, var(--color-scrim) 0%, var(--color-scrim-soft) 48%, transparent 100%);
}

.search-hero__content {
  position: relative;
  max-width: 54ch;
  color: var(--color-on-scrim);
}

.search-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-sm);
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background-color: var(--color-glass);
  color: var(--color-focal-ink);
  font-size: var(--text-11);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.search-hero__title {
  max-width: 16ch;
  margin-top: var(--space-4);
  font-size: var(--text-34);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: var(--tracking-tighter);
  color: var(--color-on-scrim);
}

.search-hero__lead {
  max-width: 44ch;
  margin-top: var(--space-3);
  font-size: var(--text-15);
  color: var(--color-on-scrim);
  opacity: 0.88;
}

.search-hero__cta { margin-top: var(--space-6); }

/* El sticky va en un hijo, NO en el <form>. El drawer de filtros vive dentro
   del mismo form (comparte sus campos), y un form sticky con z-index abre un
   contexto de apilado: el z-index 51 del drawer pasaba a medirse dentro de esos
   20, por debajo del header (30), que le tapaba la cruz de cerrar. */
.filter-bar__sticky {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  padding: var(--space-3) 0;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.filter-bar__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.filter-bar__search {
  position: relative;
  flex: 1;
  min-width: 0;
}

.filter-bar__search .control { padding-left: var(--space-8); }

.filter-bar__search-icon {
  position: absolute;
  top: 50%;
  left: var(--space-3);
  transform: translateY(-50%);
  color: var(--color-focal);
  pointer-events: none;
}

.filter-bar__select { width: 176px; flex-shrink: 0; }
.filter-bar__select--narrow { width: 150px; }

.btn-more-filters { flex-shrink: 0; }

.filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-full);
  background-color: var(--color-focal);
  color: var(--color-focal-contrast);
  font-size: var(--text-11);
  font-weight: 700;
  line-height: 1;
}

.filter-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

@media (max-width: 60rem) {
  .filter-bar__select { display: none; }
}

@media (max-width: 48rem) {
  .filter-bar__row { flex-wrap: wrap; }
  .filter-bar__search { order: -1; flex: 1 0 100%; }

  /* A 320 y 360 px el segmentado y "Más filtros" no entraban juntos y el botón
     caía a un renglón propio, alineado a la izquierda y con el hueco al lado.
     El segmentado cede ancho y el botón acorta su etiqueta; el espaciador
     desaparece, que era lo que empujaba el quiebre. */
  .filter-bar__spacer { display: none; }
  .filter-bar .segmented { flex: 1 1 auto; min-width: 0; }
  .filter-bar .segmented__button { flex: 1; min-width: 0; padding: 0 var(--space-2); }
  .btn-more-filters { flex: 0 0 auto; }
}

.results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Si el conteo y el orden no entran en una línea, el orden baja entero. Antes
     no envolvía y las dos cosas se estrujaban en columnas de dos palabras. */
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

.results-head__note { margin-bottom: var(--space-4); max-width: 60ch; }

.results-head__count {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.results-head__scope { font-size: var(--text-12); color: var(--color-text-faint); }

.results-head__tools {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* El select dice "Más recientes" y ya se entiende: la etiqueta "Ordenar por:"
   ocupaba una palabra de más en una barra que en móvil no tiene lugar. Queda
   como aria-label. */
.sort-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sort-controls__select {
  width: auto;
  height: var(--control-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-12);
  font-weight: 600;
}

@media (max-width: 48rem) {
  .results-head { align-items: baseline; }
  .results-head__scope,
  .results-head__view { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   DRAWER DE FILTROS
   ═══════════════════════════════════════════════════════════════════ */

/* Se abre y se cierra con `transform`, NO con `right`. Con `right`, la regla
   móvil de abajo (`right: -100%`) pisaba a `.filters-drawer--open { right: 0 }`
   -- misma especificidad, escrita después -- y el panel se quedaba fuera de la
   pantalla: el overlay se oscurecía y no aparecía nada. Con transform la regla
   móvil sólo toca el ancho y no hay nada que pisar. */
.filters-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 51;
  display: flex;
  flex-direction: column;
  width: var(--drawer-w);
  max-width: 100%;
  height: 100dvh;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-drawer);
  transform: translateX(calc(100% + var(--space-6)));
  transition: transform var(--transition-smooth);
}

.filters-drawer--open { transform: none; }

.filters-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.filters-drawer__title {
  font-size: var(--text-18);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.filters-drawer__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.filters-drawer__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.filters-drawer__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.filters-drawer__section-title {
  margin: 0;
  font-size: var(--text-11);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.filters-drawer__footer {
  padding: var(--space-4) var(--space-5);
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.filters-drawer__overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background-color: var(--color-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-smooth);
}

.filters-drawer__overlay--visible { opacity: 1; pointer-events: auto; }

@media (max-width: 48rem) {
  .filters-drawer { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   FICHA DE PROPIEDAD
   ═══════════════════════════════════════════════════════════════════ */

.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) 0 0;
  font-size: var(--text-12);
  color: var(--color-text-muted);
}

.breadcrumbs__current { color: var(--color-text); font-weight: 600; }

/* La galería va primero y ocupa media pantalla: la foto es lo que vende. */
.gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.gallery__main {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  background-color: var(--color-focal-soft);
  overflow: hidden;
}

.gallery__side {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  gap: var(--space-3);
}

.gallery__thumb {
  position: relative;
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-strong);
  overflow: hidden;
  cursor: zoom-in;
}

.gallery__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La foto de la miniatura se posiciona sobre el marco, como los slides sobre
   .gallery__main. Suelta medía por su alto natural —`height: 100%` contra un
   alto indefinido es `auto`—, así que una foto vertical estiraba la columna
   lateral muy por encima de la principal, que se queda en su 16/9: la fila del
   grid tomaba el alto de la columna y dejaba media pantalla de aire debajo de
   la foto grande.

   Va con dos clases a propósito: .photo-whole, más abajo en la hoja, también
   declara `position`, y con una sola clase ganaba por orden. */
.gallery__thumb .gallery__image {
  position: absolute;
  inset: 0;
}

.gallery__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-overlay);
  color: var(--color-focal-contrast);
  font-size: var(--text-15);
  font-weight: 600;
}

.gallery__all {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
}

/* Con una sola foto no hay columna lateral, así que la principal ocupa todo el
   ancho en vez de dejar un tercio vacío al costado. */
.gallery:not(:has(.gallery__side)) { grid-template-columns: 1fr; }

@media (max-width: 60rem) {
  .gallery { grid-template-columns: 1fr; }
  .gallery__side { display: none; }
}

@media (max-width: 48rem) {
  .gallery { margin-top: 0; gap: 0; }
  .gallery__main { aspect-ratio: 4 / 3; border-radius: 0; }
}

.listing__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
  align-items: start;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.listing__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.listing__sidebar {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (max-width: 60rem) {
  .listing__layout { grid-template-columns: 1fr; }
  /* En móvil la tarjeta de contacto va DESPUÉS del mapa: el formulario es el
     último paso, no el primero. La acción principal sigue siempre a mano en la
     barra fija de abajo, así que bajarla no la esconde. */
  .listing__sidebar { position: static; }
}

.listing__address {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-13);
  color: var(--color-text-muted);
}

.listing__facts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.listing__description p {
  margin: 0 0 var(--space-3);
  font-size: var(--text-15);
  color: var(--color-text-soft);
  line-height: 1.65;
}

.listing__description p:last-child { margin-bottom: 0; }

.listing__amenities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.map-container {
  width: 100%;
  height: 280px;
  border-radius: var(--radius-md);
  background-color: var(--color-surface-soft);
  overflow: hidden;
}

.map-container--full { height: 100%; border: 1px solid var(--color-border); }

@media (max-width: 48rem) {
  .map-container { height: 180px; }
}

/* Precio y acción en el mismo bloque: es lo que convierte. */
.contact-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.contact-card__price {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-surface-soft);
}

.contact-card__amount {
  color: var(--color-accent);
  font-size: var(--text-34);
  font-weight: 700;
  letter-spacing: var(--tracking-tighter);
  line-height: 1.05;
}

.contact-card__unit {
  margin-top: var(--space-1);
  font-size: var(--text-12);
  color: var(--color-text-muted);
}

.contact-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.contact-card__agent {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.contact-card__agent-name { font-size: var(--text-13); font-weight: 600; }
.contact-card__agent-org { font-size: var(--text-12); color: var(--color-text-muted); }

.contact-card__trust {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-surface-soft);
  font-size: var(--text-12);
  font-weight: 600;
  color: var(--color-accent);
}

.contact-card__feedback {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-13);
}

.contact-card__feedback--success { background-color: var(--color-accent-soft); color: var(--color-accent-ink); }
.contact-card__feedback--alert   { background-color: var(--color-alert-soft);  color: var(--color-alert-ink); }

/* El formulario arranca en un campo y se abre al escribir. */
.lead-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lead-form__extra {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Se colapsa por una clase que AGREGA el controlador, no por su ausencia: sin
   JavaScript los cuatro campos se ven y la consulta se puede enviar igual. */
.lead-form--collapsed .lead-form__extra { display: none; }

.lead-form__hint {
  font-size: var(--text-11);
  color: var(--color-text-faint);
  text-align: center;
}

.honeypot {
  position: absolute;
  left: -9999px;
}

/* Denuncia "¿es una inmobiliaria?". Vive debajo de la tarjeta de contacto y
   cerrada ocupa un renglón: tiene que estar a mano, pero el acento de la
   pantalla es escribirle al dueño, no denunciarlo. */
.report {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  font-size: var(--text-13);
  color: var(--color-text-muted);
}

.report__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-13);
  font-weight: 600;
  color: var(--color-text-soft);
  cursor: pointer;
  /* Las dos, no una: Firefox y los WebKit viejos usan cada uno la suya para
     el triangulito del <details>. */
  list-style: none;
}

.report__summary::-webkit-details-marker { display: none; }
.report__summary:hover { color: var(--color-focal); }

.report__disclosure[open] .report__summary { margin-bottom: var(--space-3); }

.report__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.report__done {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--color-accent-ink);
}

.similar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 60rem) { .similar { grid-template-columns: 1fr; } }

/* Barra fija de acción en móvil */
/* fixed, no sticky: la barra es el ÚLTIMO hijo de su contenedor, y un sticky
   con bottom:0 ahí no tiene hacia dónde pegarse — se queda en su posición
   natural al final del artículo, que es justo lo que se veía. */
.action-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--layout-pad);
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-bar);
}

.action-bar .btn--lg { flex: 1; }

@media (min-width: 60rem) { .action-bar { display: none; } }

/* Deja lugar para que la barra fija no tape el final del contenido. */
@media (max-width: 60rem) {
  .has-action-bar { padding-bottom: calc(var(--space-20) + var(--space-4)); }
}

/* ═══════════════════════════════════════════════════════════════════
   TABLA DE DATOS
   table-layout: fixed + <col> es lo que garantiza que las columnas caigan
   en la misma x en todas las filas. No depende de flex.
   ═══════════════════════════════════════════════════════════════════ */

.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--text-13);
}

.data-table thead th {
  padding: var(--space-2) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg);
  color: var(--color-text-faint);
  font-size: var(--text-11);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.data-table tbody td {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-surface-soft);
  vertical-align: middle;
}

.data-table tbody tr:last-child td { border-bottom: none; }

.data-table th + th,
.data-table td + td { padding-left: 0; }

.data-table .is-num { text-align: right; font-weight: 600; white-space: nowrap; }
.data-table .is-action { text-align: right; }
.data-table .is-tight { padding-right: var(--space-3); }

.cell-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.cell-thumb {
  width: 52px;
  height: 40px;
  border-radius: var(--radius-sm);
  background-color: var(--color-focal-soft);
  object-fit: cover;
  flex-shrink: 0;
}

.cell-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--color-border-strong);
  background-color: var(--color-surface-soft);
  color: var(--color-text-disabled);
}

.cell-title__text { min-width: 0; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-title__name {
  font-size: var(--text-13);
  font-weight: 600;
  line-height: 1.3;
}

.cell-title__sub {
  font-size: var(--text-12);
  color: var(--color-text-faint);
}

.cell-title__reject {
  margin-top: var(--space-1);
  font-size: var(--text-11);
  color: var(--color-alert);
}

.cell-status__hint {
  margin-top: var(--space-1);
  font-size: var(--text-11);
  color: var(--color-text-faint);
}

.cell-muted { color: var(--color-text-disabled); }

.cell-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.cell-actions form { margin: 0; }

/* ─── Menú de fila ────────────────────────────────────────────────────
   Un <details> nativo: abre y cierra sin JS. El panel es absoluto y se
   ancla al borde derecho del botón, así que hay que anclarlo a algo:
   `position: relative` en el propio <details>. Sin estas reglas el panel
   caía en flujo normal, debajo de la fila y a ancho completo. */
.row-menu { position: relative; display: inline-flex; }

.row-menu > summary {
  list-style: none;
  cursor: pointer;
}

.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu > summary::marker { content: ""; }

.row-menu__panel {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 190px;
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.row-menu__panel form { display: block; margin: 0; }

.row-menu__item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-13);
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.row-menu__item:hover { background-color: var(--color-surface-soft); }
.row-menu__item--danger { color: var(--color-alert); }

.row-menu__sep {
  height: 1px;
  margin: var(--space-1) var(--space-2);
  background-color: var(--color-border);
}

/* `.panel--flush` recorta con overflow: hidden, y eso se comía el menú de las
   últimas filas. Acá el recorte se cambia por esquinas redondeadas en la propia
   tabla, que es lo único que el overflow estaba resolviendo. */
.panel--menus { overflow: visible; }
.panel--menus .data-table { border-collapse: separate; border-spacing: 0; }
.panel--menus .data-table thead th:first-child { border-top-left-radius: var(--radius-lg); }
.panel--menus .data-table thead th:last-child { border-top-right-radius: var(--radius-lg); }

/* Móvil: la fila SIGUE siendo una fila. Colapsarla a una tarjeta con etiquetas
   ("PROPIEDAD", "PRECIO"…) rompía la lectura en columna y estiraba cada aviso a
   media pantalla.

   Es una grilla con áreas nombradas, no un flex que envuelve: con wrap, la fila
   del precio más largo empujaba el botón fuera del ancho y mandaba el menú de
   tres puntos a un renglón suelto. Con áreas, cada cosa cae siempre en el mismo
   lugar, mida lo que mida.

       [ foto + título ......................... estado ]
       [ precio ....................... acción   ⋮ ]

   La columna de consultas se cae: es el dato menos urgente de los cinco. */
@media (max-width: 60rem) {
  .data-table,
  .data-table tbody { display: block; width: 100%; }

  .data-table thead,
  .data-table colgroup { display: none; }

  .data-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "propiedad estado menu"
      "precio    precio precio";
    align-items: center;
    /* Gap y padding un escalón por debajo del resto de la app: en esta fila
       cada píxel horizontal que no se gasta en aire va al título, que es lo
       único que identifica al aviso. */
    gap: var(--space-2);
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-surface-soft);
  }

  .data-table tbody tr:last-child { border-bottom: none; }

  .data-table tbody td {
    display: block;
    min-width: 0;
    padding: 0;
    border-bottom: none;
  }

  /* Las etiquetas de columna sólo tienen sentido en una tarjeta apilada. */
  .data-table td[data-label]::before { content: none; }

  .data-table td[data-label="Propiedad"] { grid-area: propiedad; }
  .data-table td[data-label="Precio"]    { grid-area: precio; text-align: left; }
  .data-table tbody td:last-child        { grid-area: menu; }
  .data-table td[data-label="Consultas"] { display: none; }

  /* El badge va en el renglón del menú; la aclaración de 11px, no. `display:
     contents` disuelve la celda de estado para que sus dos hijos se coloquen
     por separado en la grilla de la fila: si viajaran juntos, la columna del
     estado se dimensionaría por el texto largo ("subí una foto para poder
     enviarla") y dejaría al título sin ancho.

         [ foto + título ........... estado  ⋮ ]
         [ precio ]
         [ aclaración ]                          ← sólo si la hay

     La aclaración no tiene área nombrada a propósito: ocupa una fila implícita,
     que sólo existe cuando el elemento existe. Con un área declarada, las filas
     sin aclaración cargaban igual con el row-gap de una fila vacía. */
  .data-table td[data-label="Estado"] { display: contents; }
  .data-table td[data-label="Estado"] > span { grid-area: estado; justify-self: end; }

  /* Miniatura más chica: sale de la misma cuenta que el gap y el padding. */
  .cell-thumb { width: 44px; height: 34px; }
  .cell-status__hint { grid-column: 1 / -1; margin-top: 0; text-align: left; }

  /* El menú de tres puntos queda al costado derecho, a su ancho natural. Antes
     ocupaba el 100% y caía debajo del aviso. */
  .cell-actions { justify-content: flex-end; }
  .cell-actions .btn { width: auto; }
  .cell-actions .btn--icon { flex: 0 0 auto; }
}

/* ═══════════════════════════════════════════════════════════════════
   AGENTE · CUPOS · ARRANQUE
   ═══════════════════════════════════════════════════════════════════ */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.step {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.step--done { border-color: var(--color-accent-soft); background-color: var(--color-accent-tint); }
.step--now  { border-color: var(--color-border-strong); }

.step__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-strong);
  color: var(--color-focal);
  font-size: var(--text-11);
  font-weight: 700;
  flex-shrink: 0;
}

.step--done .step__num { background-color: var(--color-accent); color: var(--color-accent-contrast); }
.step--now .step__num  { background-color: var(--color-focal);  color: var(--color-focal-contrast); }

.step__title { font-size: var(--text-13); font-weight: 600; }
.step__body { margin-top: var(--space-2); font-size: var(--text-12); color: var(--color-text-muted); }

.onboard {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
}

.onboard__body { flex: 1; min-width: 0; }
.onboard__preview { width: 264px; flex-shrink: 0; }

@media (max-width: 60rem) {
  .steps { grid-template-columns: 1fr; }
  .onboard { flex-direction: column; gap: var(--space-6); }
  .onboard__preview { width: 100%; }
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-13);
  color: var(--color-text-muted);
}

.checklist__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.checklist li.is-done { color: var(--color-text-soft); }
.checklist li.is-done .checklist__mark {
  border-color: transparent;
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}

/* Propuesta de valor del registro */
.split {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-6);
}

.split__pitch {
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-lg);
  background-color: var(--color-focal-soft);
}

.split__pitch-title {
  font-size: var(--text-24);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}

.split__pitch-lead { margin-top: var(--space-2); font-size: var(--text-13); color: var(--color-text-soft); }

.split__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.split__item { display: flex; gap: var(--space-3); }

.split__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-accent);
  flex-shrink: 0;
}

.split__item-title { font-size: var(--text-13); font-weight: 600; }
.split__item-body { margin-top: var(--space-half); font-size: var(--text-13); color: var(--color-text-soft); }

.split__foot {
  margin-top: auto;
  padding-top: var(--space-6);
  font-size: var(--text-12);
  color: var(--color-focal-ink);
}

@media (max-width: 60rem) {
  .split { grid-template-columns: 1fr; }
  .split__pitch { order: 1; }
}

/* ═══════════════════════════════════════════════════════════════════
   CARGA DE PROPIEDAD
   ═══════════════════════════════════════════════════════════════════ */

.form-shell__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: var(--space-6);
}

.form-shell__rail {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-shell__bar {
  position: sticky;
  bottom: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-5);
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-bar);
}

@media (max-width: 60rem) {
  .form-shell__grid { grid-template-columns: 1fr; }
  .form-shell__rail { position: static; }

  .form-shell__bar {
    flex-direction: column;
    align-items: stretch;
    margin-right: calc(-1 * var(--layout-pad));
    margin-left: calc(-1 * var(--layout-pad));
    border-radius: 0;
  }

  .form-shell__bar .btn-row .btn { flex: 1; }
}

/* El guardado en vuelo. Turbo le pone aria-busy="true" al formulario mientras
   el POST está en el aire y se lo saca al terminar, así que el spinner del
   botón cuelga de ahí y no de una clase que alguien tenga que acordarse de
   agregar y de sacar. */
@keyframes spin { to { transform: rotate(1turn); } }

.form-shell[aria-busy="true"] .btn--focal::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

/* El velo de guardado. Sólo se levanta cuando el envío se lleva fotos nuevas:
   el POST sube los archivos enteros y pueden ser decenas de segundos. */
.saving {
  position: fixed;
  inset: 0;
  /* Por encima del visor de fotos (70): mientras se guarda, nada. */
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background-color: var(--color-scrim);
}

/* Igual que en .lightbox: el display: flex de arriba le gana al display: none
   del atributo, y el velo quedaría puesto sobre el formulario entero. */
.saving[hidden] { display: none; }

.saving__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 22rem;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.saving__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-focal-dim);
  border-top-color: var(--color-focal);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

.saving__title { font-size: var(--text-15); font-weight: 600; }
.saving__detail { font-size: var(--text-13); color: var(--color-text-muted); }

/* Un spinner es el único caso donde detener la animación borra el mensaje: lo
   que comunica es justamente que algo sigue pasando. Se frena, no se apaga. */
@media (prefers-reduced-motion: reduce) {
  .saving__spinner,
  .form-shell[aria-busy="true"] .btn--focal::before { animation-duration: 2.4s; }
}

/* ═══════════════════════════════════════════════════════════════════
   CONSULTAS
   ═══════════════════════════════════════════════════════════════════ */

.lead {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.lead--unanswered { border-left: 3px solid var(--color-alert); }

.lead__body { flex: 1; min-width: 0; }

.lead__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.lead__name { font-size: var(--text-15); font-weight: 600; }
.lead__contact { margin-top: var(--space-half); font-size: var(--text-12); color: var(--color-text-muted); }

.lead__message {
  margin-top: var(--space-3);
  font-size: var(--text-13);
  color: var(--color-text-soft);
  line-height: 1.6;
}

.lead__listing {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-12);
  font-weight: 600;
}

.lead__listing-thumb {
  width: 28px;
  height: 21px;
  border-radius: var(--radius-xs);
  background-color: var(--color-focal-soft);
  object-fit: cover;
  flex-shrink: 0;
}

.lead__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

@media (max-width: 60rem) {
  .lead { flex-wrap: wrap; }
  .lead__actions { width: 100%; }
  .lead__actions .btn { flex: 1; }
  .lead__actions .btn--icon { flex: 0 0 auto; }
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN
   ═══════════════════════════════════════════════════════════════════ */

.admin-bar {
  background-color: var(--color-focal);
  color: var(--color-focal-contrast);
}

.admin-bar .layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-h);
}

.admin-bar a { color: var(--color-focal-dim); }
.admin-bar a:hover { color: var(--color-focal-contrast); }

.admin-bar .chip {
  border-color: transparent;
  background-color: transparent;
  color: var(--color-focal-dim);
}

.admin-bar .chip--on {
  background-color: var(--color-surface-strong);
  color: var(--color-focal);
}

.review {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-5);
}

.review__media { width: 380px; flex-shrink: 0; }

.review__photo {
  position: relative;
  aspect-ratio: 19 / 12;
  border-radius: var(--radius-md);
  background-color: var(--color-focal-soft);
  overflow: hidden;
}

.review__strip {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.review__strip-item {
  flex: 1;
  height: 48px;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-strong);
  object-fit: cover;
}

.review__body { flex: 1; min-width: 0; }

.review__title { margin-top: var(--space-2); font-size: var(--text-18); font-weight: 600; }

.review__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-2);
  font-size: var(--text-13);
  color: var(--color-text-muted);
}

.review__price {
  color: var(--color-accent);
  font-size: var(--text-18);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}

.review__excerpt {
  max-height: 76px;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  font-size: var(--text-13);
  color: var(--color-text-soft);
  line-height: 1.6;
  overflow: hidden;
}

.review__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-surface-soft);
}

.review__reject {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-alert-soft);
}

.review__reject-label {
  font-size: var(--text-12);
  font-weight: 600;
  color: var(--color-alert-ink);
  flex-shrink: 0;
}

.review__reject .choice__label {
  border-color: var(--color-alert-border);
  color: var(--color-alert-ink);
}

.review__reject .choice input:checked + .choice__label {
  border-color: var(--color-alert);
  background-color: var(--color-alert);
  color: var(--color-focal-contrast);
}

.review__reject .control { flex: 1; min-width: 200px; }

.keyhint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-12);
  color: var(--color-text-muted);
}

.keyhint kbd {
  display: inline-flex;
  align-items: center;
  height: var(--control-xs);
  padding: 0 var(--space-2);
  border-radius: var(--radius-xs);
  background-color: var(--color-surface-soft);
  color: var(--color-text-soft);
  font-family: inherit;
  font-size: var(--text-11);
  font-weight: 700;
}

@media (max-width: 60rem) {
  .review { flex-direction: column; }
  .review__media { width: 100%; }
  .review__actions { flex-wrap: wrap; }
  .keyhint { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   FOTOS · SUBIDA · CARRUSEL
   ═══════════════════════════════════════════════════════════════════ */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.photo-grid__item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background-color: var(--color-surface-soft);
  overflow: hidden;
  cursor: grab;
}

.photo-grid__item:active { cursor: grabbing; }
.photo-grid__item--dragging { opacity: 0.5; }
.photo-grid__item--drag-over { outline: 2px dashed var(--color-focal); outline-offset: -2px; }

.photo-grid__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-grid__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  display: inline-flex;
  align-items: center;
  height: var(--control-xs);
  padding: 0 var(--space-2);
  border-radius: var(--radius-xs);
  background-color: var(--color-scrim);
  color: var(--color-focal-contrast);
  font-size: var(--text-11);
  font-weight: 700;
}

.photo-grid__badge--cover { background-color: var(--color-accent); }

.photo-grid__drag-handle {
  position: absolute;
  bottom: var(--space-2);
  left: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xs);
  background-color: var(--color-glass);
  color: var(--color-text-muted);
  cursor: grab;
}

.photo-grid__actions {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
}

.photo-grid__delete-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background-color: var(--color-scrim-soft);
  color: var(--color-focal-contrast);
  cursor: pointer;
}

.photo-grid__checkbox { width: 14px; height: 14px; cursor: pointer; accent-color: var(--color-alert); }
/* La etiqueta se oculta a la vista pero NO a los lectores de pantalla: con
   display:none el checkbox de eliminar queda sin nombre accesible. El markup le
   pone .visually-hidden; acá no puede haber un display que le gane. */

.photo-grid__add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  aspect-ratio: 4 / 3;
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-focal);
  font-size: var(--text-12);
  font-weight: 600;
  cursor: pointer;
}

.photo-grid__add:hover { border-color: var(--color-focal); background-color: var(--color-surface-soft); }

.file-upload__input { display: none; }

.file-upload__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.file-upload__dropzone:hover,
.file-upload__dropzone--dragging {
  border-color: var(--color-focal);
  background-color: var(--color-surface-soft);
}

.file-upload__message { font-size: var(--text-13); font-weight: 600; color: var(--color-text); }
.file-upload__hint { font-size: var(--text-12); color: var(--color-text-faint); }

.file-upload__file-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-3);
}

.file-upload__file {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  text-align: left;
}

.file-upload__file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-xs);
  background-color: var(--color-surface-soft);
  overflow: hidden;
  flex-shrink: 0;
}

.file-upload__file-preview { width: 100%; height: 100%; object-fit: cover; }
.file-upload__file-info { flex: 1; min-width: 0; }
.file-upload__file-name { font-size: var(--text-12); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-upload__file-size { font-size: var(--text-11); color: var(--color-text-faint); }

.file-upload__file-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--control-sm);
  height: var(--control-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
}

.file-upload__file-remove:hover { border-color: var(--color-alert); color: var(--color-alert); }

.carousel {
  position: relative;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-soft);
  overflow: hidden;
}

.carousel__track { position: relative; aspect-ratio: 16 / 9; }

/* El slide es un <button> que abre el visor, de ahí el reseteo: sin él el
   navegador le pone su borde y su relleno grises alrededor de la foto. */
.carousel__slide {
  position: absolute;
  inset: 0;
  padding: 0;
  border: none;
  background: none;
  opacity: 0;
  transition: opacity var(--transition-smooth);
  pointer-events: none;
  cursor: zoom-in;
}

.carousel__slide--active { opacity: 1; pointer-events: auto; }
.carousel__image { width: 100%; height: 100%; object-fit: cover; }

.carousel__button {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  transform: translateY(-50%);
  border: none;
  border-radius: var(--radius-full);
  background-color: var(--color-glass);
  color: var(--color-text);
  font-size: var(--text-24);
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
}

.carousel__button--prev { left: var(--space-3); }
.carousel__button--next { right: var(--space-3); }
.carousel__button:disabled { opacity: 0.3; cursor: not-allowed; }

.carousel__counter {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: var(--control-xs);
  padding: 0 var(--space-2);
  border-radius: var(--radius-xs);
  background-color: var(--color-scrim);
  color: var(--color-focal-contrast);
  font-size: var(--text-11);
  font-weight: 600;
}

.carousel__thumbnails {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2);
  background-color: var(--color-surface);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.carousel__thumbnail {
  width: 80px;
  height: 60px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
}

.carousel__thumbnail--active { border-color: var(--color-accent); }
.carousel__thumbnail-image { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 48rem) {
  .carousel__thumbnail { width: 60px; height: 45px; }
}

/* ═══════════════════════════════════════════════════════════════════
   VISOR DE FOTOS
   ═══════════════════════════════════════════════════════════════════ */

/* En la grilla la foto va recortada a 16/9 porque la composición manda; una
   cocina angosta o un plano vertical se pierden mitad afuera. Acá la foto
   entra entera: `contain` en vez de `cover`, y el alto lo pone la pantalla. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  background-color: var(--color-scrim-deep);
}

/* `hidden` solo no alcanza: el display: flex de arriba le gana al display:
   none del atributo, y el visor quedaría abierto sobre toda la página. */
.lightbox[hidden] { display: none; }

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  padding-top: max(var(--space-3), env(safe-area-inset-top));
  color: var(--color-on-scrim);
}

.lightbox__counter {
  font-size: var(--text-13);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.lightbox__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--control-md);
  height: var(--control-md);
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background-color: transparent;
  color: var(--color-on-scrim);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.lightbox__close:hover {
  background-color: var(--color-glass-on-scrim);
  color: var(--color-on-glass);
}

/* `min-height: 0` para que el stage pueda achicarse dentro del flex: sin eso
   su base es el alto de la foto y la barra se va arriba de la pantalla. */
.lightbox__stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-4) var(--space-5);
  padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
}

.lightbox__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
}

/* Las flechas de la grilla siguen al tema vía --color-glass, que en oscuro es
   casi negro. Sobre el fondo del visor —oscuro en los dos temas— se perdían,
   así que acá se fijan claras. */
.lightbox .carousel__button {
  background-color: var(--color-glass-on-scrim);
  color: var(--color-on-glass);
}

@media (max-width: 48rem) {
  .lightbox__stage { padding: 0 var(--space-2) var(--space-4); }
  .lightbox__image { border-radius: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   PAGINACIÓN
   ═══════════════════════════════════════════════════════════════════ */

.pagy,
.pagy-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  margin-top: var(--space-6);
}

.pagy a,
.pagy-nav a,
.pagy-nav .page,
.pagy-nav .active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-sm);
  height: var(--control-sm);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-12);
  font-weight: 600;
}

.pagy a:hover,
.pagy-nav a:hover { border-color: var(--color-border-strong); background-color: var(--color-surface); }

.pagy a[aria-current="page"],
.pagy .current,
.pagy-nav .active {
  border-color: var(--color-focal);
  background-color: var(--color-focal);
  color: var(--color-focal-contrast);
}

.pagy .gap,
.pagy a[aria-disabled="true"] { border-color: var(--color-border); color: var(--color-text-disabled); }

/* ═══════════════════════════════════════════════════════════════════
   BÚSQUEDA EN MAPA
   ═══════════════════════════════════════════════════════════════════ */

.search-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
}

.search-layout__list--full { grid-column: 1 / -1; }
.search-layout__list { min-width: 0; }

.search-layout__map {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  height: calc(100dvh - var(--header-h) - var(--space-8));
}

@media (max-width: 60rem) {
  .search-layout { grid-template-columns: 1fr; }
  .search-layout__map { position: relative; top: 0; height: 400px; order: -1; }
}

.map-info-window { padding: var(--space-2); }
.map-info-window h3 { font-size: var(--text-13); font-weight: 600; }
.map-info-window p { margin-top: var(--space-1); font-size: var(--text-12); }

/* Interruptor Lista / Mapa. En escritorio vive en la barra de resultados; en
   móvil flota sobre el listado en vez de ocupar una fila fija, que es lo que
   hace todo el mundo en mapas. (Fase 12.) */
.view-switch {
  position: sticky;
  bottom: var(--space-4);
  z-index: 22;
  display: none;
  justify-content: center;
}

.view-switch__inner {
  display: inline-flex;
  gap: var(--space-half);
  padding: var(--space-half);
  border-radius: var(--radius-full);
  background-color: var(--color-text);
  box-shadow: var(--shadow-lg);
}

.view-switch__inner .segmented__button {
  border-radius: var(--radius-full);
  color: var(--color-surface);
}

.view-switch__inner .segmented__radio:checked + .segmented__button {
  background-color: var(--color-surface);
  color: var(--color-text);
}

@media (max-width: 60rem) {
  .view-switch { display: flex; }
}


/* Etiquetas que se acortan cuando no hay ancho. */
/* Prosa larga: las guías y /sobre-kavia. Es el único lugar del sitio donde el
   contenido es texto corrido y no fichas, así que necesita medida de lectura
   propia. 68ch es el ancho donde el ojo vuelve al renglón siguiente sin
   perderse; el resto de la página sigue midiendo --layout-max. */
.prose {
  max-width: 68ch;
}

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 var(--space-4);
  font-size: var(--text-15);
  color: var(--color-text-soft);
  line-height: 1.7;
}

.prose li {
  margin-bottom: var(--space-2);
}

.prose h2 {
  margin: var(--space-8) 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-18);
  color: var(--color-text);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose strong {
  color: var(--color-text);
}

/* La respuesta directa, arriba de todo. Va destacada porque es literalmente el
   pasaje que un motor de respuesta cita: si se pierde entre los párrafos, la
   página deja de tener una respuesta y pasa a tener un texto. */
.prose__answer {
  margin: 0 0 var(--space-6);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-accent);
  font-size: var(--text-18);
  color: var(--color-text);
  line-height: 1.55;
}

/* Las fuentes. Chicas y al final, pero presentes: una guía sobre comisiones e
   impuestos sin fuente citada no es citable, y en materia legal argentina
   tampoco es honesta. */
.sources {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.sources__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.sources ul {
  margin: 0;
  padding-left: var(--space-4);
  font-size: var(--text-13);
  color: var(--color-text-muted);
}

.solo-angosto { display: none; }

@media (max-width: 48rem) {
  .solo-ancho { display: none; }
  .solo-angosto { display: inline; }
}

/* Teléfonos muy angostos (320–360): el segmentado y el botón de filtros entran
   juntos recortando lo prescindible — el ícono y el aire lateral— antes que
   dejar el botón huérfano en un renglón propio. */
@media (max-width: 23rem) {
  .btn-more-filters svg { display: none; }
  .filter-bar .segmented__button { padding: 0 var(--space-1); font-size: var(--text-11); }
  .btn-more-filters { padding: 0 var(--space-3); }
}

/* La lista de sugerencias de ubicación. Se ancla al contenedor de búsqueda,
   que ya es position: relative. */
.place-suggest {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 20rem;
  overflow-y: auto;
}

.place-suggest__item {
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}

.place-suggest__item:hover,
.place-suggest__item[aria-selected="true"] {
  background: var(--color-bg);
}

.place-suggest__count {
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   FOTO ENTERA — va al final a propósito
   ═══════════════════════════════════════════════════════════════════ */

/* Par reusable para mostrar una foto entera adentro de un marco de proporción
   fija: la tarjeta de resultados, la galería de la ficha y sus miniaturas.
   `cover` les comía un tercio a las cuadradas y a las verticales, que es justo
   donde se ve el ambiente. Los marcos no cambian de alto —si siguieran a cada
   foto, la grilla quedaría dentada y la ficha saltaría al pasar de una a la
   otra—, así que el hueco lo llena la misma foto desenfocada en vez de una
   banda muerta. El marco tiene que llevar overflow: hidden.

   El bloque vive al final del archivo y no arriba con .hidden y .visually-hidden:
   pisa el `object-fit: cover` de .card__image y .gallery__image, que son
   selectores de una clase igual que estos, así que gana el que se escribe
   último. Arriba, la foto volvía a salir recortada. */
.photo-whole {
  position: relative;
  object-fit: contain;
}

/* El `scale` es por el desenfoque: sin agrandar, el blur deja los bordes
   lavados contra el marco. */
.photo-backdrop {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  filter: blur(24px) brightness(0.72);
  transform: scale(1.15);
}