/*
 * ═══════════════════════════════════════════════════════
 *  INMOBILIARIA — Design System
 *  Inspirado en Property Partners (ppartnersgroup.com)
 *  Paleta: Navy oscuro, blanco, rojo CTA, índigo tags
 * ═══════════════════════════════════════════════════════
 */

/* ── Google Fonts ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── CSS Variables ────────────────────────────────── */
:root {
  /* Paleta principal — Property Partners style */
  --color-navy-950: #020617;
  --color-navy-900: #0f172a;
  --color-navy-800: #1e293b;
  --color-navy-700: #334155;
  --color-navy-600: #475569;

  /* Acento CTA */
  --color-red: #dc2626;
  --color-red-hover: #ef4444;

  /* Acento tags */
  --color-indigo: #4f46e5;
  --color-indigo-light: #818cf8;

  /* Neutros */
  --color-white: #ffffff;
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;

  /* ── Tokens semánticos ──────────────────────────
     Las superficies y textos del perfil y del panel usan ESTOS, no la paleta
     directa. Así el modo oscuro se resuelve redefiniéndolos en un solo lugar. */
  --surface-bg: var(--color-slate-50);
  --surface-card: var(--color-white);
  --surface-muted: var(--color-slate-100);
  --surface-muted-hover: var(--color-slate-200);

  --border-color: var(--color-slate-200);
  --border-soft: var(--color-slate-100);
  --border-strong: var(--color-slate-300);

  --text-strong: var(--color-navy-900);
  --text-body: var(--color-navy-800);
  --text-muted: var(--color-slate-600);
  /* slate-500 y no slate-400: sobre el blanco de las tarjetas, el 400 daba
     2,56:1 —bajo el 4,5 que pide WCAG AA— y los titulos de tarjeta y las
     etiquetas del perfil quedaban casi ilegibles. El 500 da 4,8:1 y sigue
     leyendose mas suave que --text-muted. En oscuro este token ya era
     slate-500; el desajuste estaba solo en el tema claro. */
  --text-subtle: var(--color-slate-500);

  /* Elementos sólidos de alto contraste (chips activos, badges) */
  --solid-bg: var(--color-navy-900);
  --solid-text: var(--color-white);

  /* Acento para textos pequeños. Dos tokens y no uno porque hay dos clases de
     superficie: las que siguen el tema y las que son claras siempre.

     El índigo de la paleta (#6366f1) se queda en 4.2-4.5:1 sobre fondos claros,
     justo bajo el mínimo de 4.5:1 que pide la norma para texto normal. Medido,
     no estimado. */
  --accent-label: #4f46e5;       /* sigue al tema: ver el bloque de modo oscuro */
  /* Ya no queda ninguna superficie blanca fija: se conserva por si vuelve a
     hacer falta, pero hoy no lo usa nadie. */
  --accent-on-light: #4f46e5;

  --shadow-card: rgba(2, 6, 23, 0.09);
  --shadow-raised: rgba(2, 6, 23, 0.18);

  /* Tipografía */
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Tamaños */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.25rem;

  /* Espaciado */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Bordes — esquinas muy redondeadas como PP */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  /* Transiciones */
  --t-fast: 0.15s ease;
  --t-base: 0.3s ease;
  --t-slow: 0.5s ease;

  /* Layout */
  --container-max: 1280px;
  --header-h: 72px;
}


/* ── Reset & Base ─────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-main);
  font-size: var(--text-base);
  /* Tokens y no la paleta cruda: con `--color-navy-900` fijo, el fondo de la
     página era oscuro también en modo claro y el tema quedaba a medio aplicar. */
  color: var(--text-body);
  background: var(--surface-bg);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: color var(--t-fast); }
ul, ol { list-style: none; }


/* ── Container ────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}


/* ══════════════════════════════════════════════════
   HEADER — Estilo Property Partners
   ══════════════════════════════════════════════════ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  z-index: 1000;
  transition: all var(--t-base);
}

.header--transparent {
  background: transparent;
}

.header--solid {
  /* 0.92 y no 1: la barra deja ver algo de lo que pasa por debajo al bajar */
  background: color-mix(in srgb, var(--surface-card) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Logo */
.header__logo {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-white);
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-transform: uppercase;
}

.header__logo strong {
  font-weight: 800;
}

.header__logo-img {
  width: auto;
  height: 40px;
}

/* Nav */
.header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

/* El cajon lateral existe solo bajo 768px: en escritorio el menu es una fila
   y no hay nada que cerrar ni que oscurecer. */
.header__nav-close {
  display: none;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  /*
   * Por debajo del header (1000), no por encima.
   *
   * El cajon lateral es un hijo de .header, y .header es fixed con z-index,
   * o sea que abre su propio contexto de apilamiento: el z-index del cajon se
   * resuelve DENTRO del header y no puede pasar por encima de nada de afuera.
   * Con el fondo en 1000, al ser hermano del header y ir despues en el
   * marcado, se pintaba sobre todo el header y apagaba el propio panel.
   *
   * Con 999 el fondo queda bajo el header: oscurece la pagina y deja el cajon
   * a plena luz. La franja de la barra que el panel no cubre —el logo— se
   * queda sin oscurecer, que es como funciona esto en la mayoria de los
   * sitios; taparla tambien obligaria a sacar el cajon fuera del header.
   */
  z-index: 999;
  /* Fijo a proposito: es una sombra sobre la pagina, no una superficie, asi
     que oscurece igual en los dos temas. */
  background: rgba(2, 6, 23, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base), visibility var(--t-base);
}

.nav-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.header__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  transition: color var(--t-fast);
}

.header__link:hover {
  color: var(--color-white);
}

/* ── Desplegables de la barra: Propiedades y Herramientas (#71) ──
   El rotulo es un enlace normal y al lado va un boton chico con la flecha,
   que es el que abre el panel. Asi el click en «Propiedades» sigue llevando
   al catalogo y el panel es un extra, no un reemplazo. */
.nav-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.nav-menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: color var(--t-fast), transform var(--t-fast), background var(--t-fast);
}

.nav-menu__toggle svg {
  width: 14px;
  height: 14px;
}

.nav-menu__toggle:hover,
.nav-menu:hover .nav-menu__toggle {
  color: var(--color-white);
}

.nav-menu.open .nav-menu__toggle svg {
  transform: rotate(180deg);
}

/* Cuelga del rotulo. El hueco entre la barra y la tarjeta es padding y no
   margin a proposito: el mouse lo cruza sin salir del menu, que si no se
   cerraba a mitad de camino. */
.nav-menu__panel {
  position: absolute;
  top: 100%;
  left: -12px;
  padding-top: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  z-index: 120;
}

.nav-menu.open .nav-menu__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Misma tarjeta que el menu de usuario, para que los tres se vean familia. */
.nav-menu__card {
  width: 260px;
  padding: var(--space-2);
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 20px 45px var(--shadow-raised);
}

.nav-menu__title {
  margin: 0;
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.nav-menu__item,
.nav-menu__all {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-body);
  border-radius: 10px;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}

.nav-menu__item:hover,
.nav-menu__all:hover {
  color: var(--text-strong);
  background: var(--surface-muted);
}

.nav-menu__all {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
  border-radius: 0 0 10px 10px;
  color: var(--accent-label);
}

/* Login button like PP */
.header__login {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-white);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-6);
  transition: all var(--t-fast);
}

.header__login:hover {
  border-color: var(--color-white);
  background: rgba(255, 255, 255, 0.08);
}

/* «Trabaja con nosotros» (#72): relleno, al lado de «Iniciar sesion», como el
   «Sumate» de Property Partners. Rojo fijo en los dos fondos de la barra y en
   los dos temas: es el mismo acento que los botones primarios del sitio. */
.header__cta {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-red);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-5);
  white-space: nowrap;
  transition: background var(--t-fast);
}

.header__cta:hover {
  color: var(--color-white);
  background: var(--color-red-hover);
}

/*
 * La barra es el único sitio con dos fondos distintos: transparente sobre la
 * foto del hero —ahí el texto tiene que ser blanco sí o sí— y sólida en el
 * resto de las páginas y al bajar. Por eso el blanco de arriba se queda fijo y
 * acá se corrige sólo para la versión sólida, que sí sigue al tema.
 */
.header--solid .header__logo,
.header--solid .header__link:hover,
.header--solid .header__login:hover {
  color: var(--text-strong);
}

.header--solid .header__link,
.header--solid .header__login,
.header--solid .nav-menu__toggle {
  color: var(--text-body);
}

.header--solid .nav-menu__toggle:hover,
.header--solid .nav-menu:hover .nav-menu__toggle {
  color: var(--text-strong);
}

.header--solid .header__login {
  border-color: var(--border-strong);
}

.header--solid .header__login:hover {
  border-color: var(--text-strong);
  background: var(--surface-muted);
}

.header--solid .header__menu-btn span {
  background: var(--text-strong);
}

/* Mobile menu */
.header__menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
}

/* En escritorio estas piezas no se ven; s\u00f3lo existen para el men\u00fa m\u00f3vil */
.header__nav-close {
  display: none;
}

.header__menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--surface-card);
  transition: all var(--t-fast);
  border-radius: 1px;
}


/* ══════════════════════════════════════════════════
   HERO — Imagen full-width con search segmentado
   ══════════════════════════════════════════════════ */
.hero {
  position: relative;
  height: 70vh;
  min-height: 500px;
  max-height: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(
      to right,
      rgba(15, 23, 42, 0.45) 0%,
      rgba(15, 23, 42, 0.15) 50%,
      rgba(15, 23, 42, 0.05) 100%
    ),
    url('../images/hero-portada.jpg') center/cover no-repeat;
}

.hero__content {
  position: relative;
  z-index: 20;
  text-align: center;
  width: 100%;
  max-width: 800px;
  padding: 0 var(--space-6);
}

.hero__title {
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--color-white);
  margin-bottom: var(--space-10);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

/* Search Bar Segmentado — estilo Property Partners */
.hero__search {
  /* Va sobre la foto del hero, que es oscura en los dos temas. Redefinir aca los
     tokens de superficie y de texto lo deja claro siempre —los dropdowns incluidos,
     que los heredan— sin fijar el color regla por regla. */
  --surface-card: var(--color-white);
  --surface-muted: var(--color-slate-100);
  --surface-muted-hover: var(--color-slate-200);
  --border-color: var(--color-slate-200);
  --text-strong: var(--color-navy-900);
  --text-body: var(--color-navy-800);
  --text-muted: var(--color-slate-600);

  background: var(--surface-card);
  border-radius: var(--radius-full);
  padding: var(--space-2);
  display: flex;
  align-items: center;
  box-shadow: var(--shadow-xl);
  max-width: 750px;
  margin: 0 auto;
  position: relative;
}

.hero__search-segment {
  flex: 1;
  padding: var(--space-2) var(--space-6);
  cursor: pointer;
  transition: background var(--t-fast);
  white-space: nowrap;
  text-align: left;
  border: none;
  background: none;
  font-family: var(--font-main);
  position: relative;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero__search-segment:not(:last-of-type) {
  border-right: 1px solid var(--border-color);
}

.hero__search-segment:hover,
.hero__search-segment.active {
  background: var(--surface-muted);
}

.hero__segment-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-strong);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hero__segment-value {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-muted);
  transition: color var(--t-fast);
}

.hero__segment-value.has-value {
  color: var(--text-body);
  font-weight: 600;
}

.hero__search-btn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background: var(--color-red);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
  margin-left: var(--space-2);
}

.hero__search-btn:hover {
  background: var(--color-red-hover);
  transform: scale(1.05);
}

.hero__search-btn svg {
  width: 20px;
  height: 20px;
  /* Sobre el circulo rojo, fijo: no depende del tema ni del bloque de arriba. */
  color: var(--color-white);
}

/* ── Hero Dropdowns ───────────────────────────── */
.hero__dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 280px;
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border-color);
  padding: var(--space-5);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
}

.hero__dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hero__dropdown-title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.hero__dropdown-search {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--text-strong);
  margin-bottom: var(--space-3);
  transition: border-color var(--t-fast);
  background: var(--surface-muted);
}

.hero__dropdown-search:focus {
  outline: none;
  border-color: var(--color-indigo);
  background: var(--surface-card);
}

.hero__dropdown-list {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero__dropdown-list::-webkit-scrollbar {
  width: 4px;
}

.hero__dropdown-list::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}

.hero__dropdown-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-body);
  transition: background var(--t-fast);
}

.hero__dropdown-option:hover {
  background: var(--surface-muted);
}

.hero__dropdown-option input[type="radio"] {
  accent-color: var(--color-indigo);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Price dropdown */
.hero__dropdown-price-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

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

.hero__dropdown-price-field label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
}

.hero__dropdown-price-field input {
  width: 100%;
  padding: var(--space-3) var(--space-3);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--text-strong);
  background: var(--surface-muted);
  transition: border-color var(--t-fast);
}

.hero__dropdown-price-field input:focus {
  outline: none;
  border-color: var(--color-indigo);
  background: var(--surface-card);
}

.hero__dropdown-price-sep {
  font-size: var(--text-lg);
  color: var(--text-body);
  padding-bottom: var(--space-3);
}

/* Presets */
.hero__dropdown-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hero__preset-btn {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: inherit;
  color: var(--accent-label);
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--t-fast);
}

.hero__preset-btn:hover,
.hero__preset-btn.active {
  background: var(--color-indigo);
  color: var(--color-white);
  border-color: var(--color-indigo);
}


/* ══════════════════════════════════════════════════
   SERVICES SECTION — 3 tarjetas dark como PP
   ══════════════════════════════════════════════════ */
.services {
  background: var(--surface-muted);
  padding: var(--space-24) 0;
}

.services__header {
  text-align: center;
  margin-bottom: var(--space-12);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: none;
}

.services__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent-label);
  margin-bottom: var(--space-3);
}

.services__title {
  font-size: var(--text-5xl);
  font-weight: 800;
  color: var(--text-strong);
  line-height: 1.15;
  margin-bottom: var(--space-4);
}

.services__subtitle {
  font-size: var(--text-lg);
  color: var(--text-muted);
  margin-bottom: 0;
  transform: none;
}

/*
  Flex y no grid, a propósito.

  Con `grid-template-columns: repeat(3, 1fr)` las tarjetas ocupan siempre las
  columnas de la izquierda: si hay dos, quedan en la primera y la segunda, y la
  fila se ve descuadrada respecto del título centrado de arriba. Pasó al ocultar
  la tarjeta de valorización con IA, que dejó esta sección con dos.

  Con flex, `justify-content: center` centra las que haya, y la base de un
  tercio mantiene el ancho de tarjeta del diseño de tres columnas. Así el día
  que se reactive la tercera, la fila se ve exactamente igual que antes.
*/
.services__grid,
.specials-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
}

.services__grid > *,
.specials-grid > * {
  flex: 0 1 calc((100% - 2 * var(--space-8)) / 3);
}

.service-card {
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  transition: all var(--t-base);
}

.service-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.service-card__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: var(--space-3);
}

.service-card__text {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}

.service-card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
}

.service-card__btn {
  display: block;
  text-align: center;
  padding: var(--space-4) var(--space-8);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  color: var(--text-strong);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: all var(--t-fast);
}

.service-card__btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.service-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.service-card__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-body);
}

.service-card__check {
  color: var(--accent-label);
  font-size: var(--text-lg);
  line-height: 1;
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════
   SECTION GLOBAL
   ══════════════════════════════════════════════════ */
.section {
  padding: var(--space-24) 0;
}

/*
 * Nombre heredado: hoy no es "la sección clara", es la que se despega del fondo
 * con el color de tarjeta. Sigue el tema como todo lo demás.
 */
.section--light {
  background: var(--surface-card);
  color: var(--text-strong);
}

/*
  Igual que `--light`, pero siguiendo el tema en vez de imponer el blanco.

  `--light` es una variante de diseño de la portada, donde las secciones
  alternan clara/oscura a propósito y eso no depende del tema. En una página
  entera —contacto— sí tiene que depender: los campos y las etiquetas ya usan
  los tokens semánticos, así que sobre un fondo blanco fijo el modo oscuro
  dejaba campos oscuros flotando en una tarjeta blanca y las etiquetas, que se
  vuelven casi blancas, desaparecían.
*/
.section--surface {
  background: var(--surface-bg);
  color: var(--text-body);
}

.section__header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.section__label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent-label);
  margin-bottom: var(--space-3);
}

.section--light .section__label {
  color: var(--accent-label);
}

.section--surface .section__label {
  color: var(--accent-label);
}

.section__title {
  font-size: var(--text-3xl);
  font-weight: 800;
  margin-bottom: var(--space-4);
}

.section--light .section__title {
  color: var(--text-strong);
}

.section--surface .section__title {
  color: var(--text-strong);
}

.section__subtitle {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto;
}

.section--light .section__subtitle {
  color: var(--text-muted);
}

.section--surface .section__subtitle {
  color: var(--text-muted);
}


/* ══════════════════════════════════════════════════
   PROPERTY CARDS — Fondo blanco, esquinas grandes
   ══════════════════════════════════════════════════ */
.properties-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.property-card {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--t-base);
  display: flex;
  flex-direction: column;
  color: var(--text-strong);
}

.property-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

.property-card__image {
  display: block;
  position: relative;
  height: 240px;
  min-height: 240px;
  overflow: hidden;
  text-decoration: none;
}

.property-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.property-card:hover .property-card__image img {
  transform: scale(1.05);
}

/* Indigo tag like PP */
.property-card__badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  background: var(--color-indigo);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  z-index: 2;
}

/* Heart/favorite button */
.property-card__favorite {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--t-fast);
  font-size: var(--text-base);
  color: var(--text-muted);
  z-index: 2;
}

.property-card__favorite:hover {
  background: var(--surface-card);
  color: var(--color-red);
  transform: scale(1.1);
}

.property-card__body {
  padding: var(--space-6);
  background: var(--surface-card) !important;
  color: var(--text-strong);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.property-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: var(--space-1);
  line-height: 1.3;
}

.property-card__title a {
  color: inherit;
  text-decoration: none;
}

.property-card__title a:hover {
  color: var(--accent-label) !important;
}

.property-card__location {
  font-size: var(--text-sm);
  color: var(--text-muted) !important;
  margin-bottom: var(--space-4);
}

.property-card__price {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--text-strong);
  margin-bottom: var(--space-1);
}

.property-card__price-label {
  font-size: var(--text-xs);
  color: var(--text-muted) !important;
  font-weight: 600;
  text-transform: lowercase;
  margin-bottom: var(--space-4);
}

/* Features row (icons) */
.property-card__features {
  display: flex;
  gap: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
  margin-top: auto;
}

.property-card__feature {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted) !important;
}

.property-card__feature svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}


/* ══════════════════════════════════════════════════
   SPECIALS / BANNER CARDS — como PP "Selecciones"
   ══════════════════════════════════════════════════ */
.specials-grid {
  /* El reparto lo define la regla que comparte con .services__grid más arriba. */
  margin: 0;
}

.special-card {
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--t-base);
  cursor: pointer;
}

.special-card:hover {
  transform: translateY(-4px);
}

.special-card__image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-5);
  transition: transform var(--t-slow);
}

.special-card:hover .special-card__image {
  transform: scale(1.02);
}

.special-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: var(--space-3);
}

.special-card__text {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.7;
}

/* Cuántas hay de verdad. Es la promesa de la tarjeta hecha número: si dice
   «8 propiedades disponibles», el catálogo tiene ocho esperando. */
.special-card__count {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-label);
}


/* ══════════════════════════════════════════════════
   PÁGINA DE CONTACTO

   Usa los tokens semánticos (--surface-card, --border-color, --text-*) y no la
   paleta directa. No es una preferencia de estilo: son los que se redefinen en
   `:root[data-theme="dark"]`, así que con `--color-white` las tarjetas se
   quedaban blancas sobre el fondo oscuro y las etiquetas casi no se leían.
   El índigo del acento sí se usa igual en los dos temas.
   ══════════════════════════════════════════════════ */
.contacto {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--space-10);
  align-items: start;
}

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

.contacto__dato {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  text-decoration: none;
  color: var(--text-body);
  transition: all var(--t-base);
}

.contacto__dato:hover {
  border-color: var(--color-indigo);
  transform: translateY(-2px);
}

/* La dirección no es un enlace: no hay a dónde llevar. Se ve igual pero
   sin el gesto de que se puede pulsar. */
.contacto__dato--plano,
.contacto__dato--plano:hover {
  transform: none;
  border-color: var(--border-color);
  cursor: default;
}

.contacto__icono {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent-label);
}

.contacto__icono svg {
  width: 20px;
  height: 20px;
}

.contacto__dato-titulo {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.contacto__dato-valor {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-strong);
}

.contacto__redes {
  padding: var(--space-5);
}

.contacto__redes-links {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.contacto__form-caja {
  padding: var(--space-8);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
}

.contacto__form-titulo {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: var(--space-6);
}

@media (max-width: 900px) {
  .contacto {
    grid-template-columns: 1fr;
  }
}


/* ══════════════════════════════════════════════════
   STICKY BANNER — "En Exclusiva" como PP
   ══════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   FOOTER — Navy oscuro, multi-columna como PP
   ══════════════════════════════════════════════════ */
.footer {
  background: var(--surface-muted);
  padding: var(--space-20) 0 var(--space-8);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1.5fr;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}

.footer__title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-strong);
  margin-bottom: var(--space-6);
}

.footer__link {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding: var(--space-1) 0;
  transition: color var(--t-fast);
}

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

/* Footer brand col */
.footer__brand-name {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--text-strong);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer__brand-name .icon {
  font-size: var(--text-2xl);
}

.footer__contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.footer__contact-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-muted);
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__copy {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

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

.footer__social {
  color: var(--text-muted);
  transition: color var(--t-fast);
}

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

.footer__social svg {
  width: 20px;
  height: 20px;
}


/* ══════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .properties-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .services__grid > *,
  .specials-grid > * {
    flex-basis: calc((100% - var(--space-8)) / 2);
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .services__title {
    font-size: var(--text-4xl);
  }
}

@media (max-width: 768px) {
  .header__nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 320px;
    z-index: 1001;              /* por encima del fondo oscurecido */
    /* 100vh de respaldo para navegadores viejos; 100dvh es el que vale, porque
       descuenta la barra de direccion que aparece y desaparece al desplazarse.
       Con 100vh el panel medía de más y el final quedaba fuera de la pantalla. */
    height: 100vh;
    height: 100dvh;
    /* Sigue el tema como el resto: si se quedaba navy fijo, en modo claro el
       texto de los enlaces —que ya sigue al tema— quedaba oscuro sobre oscuro. */
    background: var(--surface-card);
    flex-direction: column;
    /* Desde arriba, no centrados: con `center` los enlaces quedaban en mitad
       de la pantalla y dejaban unos 700px vacios sobre ellos. */
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--space-6);
    transition: right var(--t-base);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
    padding: var(--space-6);
    /* Si el menu crece (sesion iniciada, pantalla baja), que se pueda deslizar
       en vez de cortarse. */
    overflow-y: auto;
  }

  .header__nav.active {
    right: 0;
  }

  .header__nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    /* 44x44 es el minimo tactil que pide el resto de la revision movil. */
    width: 44px;
    height: 44px;
    margin-bottom: var(--space-2);
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--surface-muted);
    color: var(--text-strong);
    cursor: pointer;
    transition: background var(--t-fast);
  }

  .header__nav-close:hover {
    background: var(--surface-muted-hover);
  }

  .header__nav-close svg {
    width: 20px;
    height: 20px;
  }

  /*
   * En el teléfono los enlaces no van sobre la foto del hero: van dentro del
   * cajón lateral, que es una superficie con su propio color. Por eso acá el
   * texto sigue al tema aunque la barra sea transparente —que es lo que pasa
   * en la portada—, y no se puede depender de `.header--solid`.
   */
  .header__nav .header__link,
  .header__nav .header__login {
    color: var(--text-body);
  }

  .header__nav .header__link:hover,
  .header__nav .header__login:hover {
    color: var(--text-strong);
  }

  /*
   * El chip de usuario cae en el mismo caso que los enlaces, y se me habia
   * pasado: su regla base lo pone blanco fijo porque en escritorio va sobre la
   * foto del hero, pero en el telefono vive DENTRO del cajon, que es una
   * superficie clara. Quedaba el nombre en blanco sobre blanco, a 1,00:1.
   */
  .header__nav .user-menu__trigger {
    color: var(--text-body);
    background: var(--surface-muted);
    border-color: var(--border-color);
  }

  .header__nav .user-menu__trigger:hover {
    background: var(--surface-muted-hover);
  }

  .header__nav .header__login {
    border-color: var(--border-strong);
  }

  .header__nav .header__login:hover {
    background: var(--surface-muted);
  }

  .header__nav .header__cta {
    text-align: center;
  }

  /*
   * En el telefono no hay hover: el panel pasa a ser un acordeon dentro del
   * cajon. El rotulo y la flecha comparten la fila (la flecha a 44x44, el
   * minimo tactil) y la lista cae debajo, indentada. El cajon ya tiene
   * overflow-y: auto, asi que un acordeon abierto empuja «Iniciar sesion»
   * hacia abajo pero nunca lo tapa: se llega deslizando.
   */
  .header__nav .nav-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }

  .header__nav .nav-menu__link {
    flex: 1 1 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .header__nav .nav-menu__toggle {
    width: 44px;
    height: 44px;
    color: var(--text-body);
    background: var(--surface-muted);
  }

  .header__nav .nav-menu__toggle svg {
    width: 18px;
    height: 18px;
  }

  .header__nav .nav-menu__panel {
    position: static;
    flex-basis: 100%;
    padding: 0;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .header__nav .nav-menu.open .nav-menu__panel {
    display: block;
  }

  .header__nav .nav-menu__card {
    width: auto;
    margin-top: var(--space-2);
    padding: 0 0 0 var(--space-3);
    background: none;
    border: 0;
    border-left: 2px solid var(--border-color);
    border-radius: 0;
    box-shadow: none;
  }

  .header__nav .nav-menu__title {
    display: none;
  }

  .header__nav .nav-menu__item,
  .header__nav .nav-menu__all {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .header__menu-btn {
    display: flex;
  }

  .hero {
    height: 60vh;
    min-height: 400px;
  }

  .hero__title {
    font-size: var(--text-3xl);
  }

  .hero__search {
    flex-direction: column;
    align-items: stretch;   /* Defecto D: los campos ocupan el 100% del ancho */
    border-radius: var(--radius-xl);
    gap: 0;
    max-width: 100%;
  }

  .hero__search-segment {
    border-right: none !important;
    border-bottom: 1px solid var(--border-color);
    padding: var(--space-4) var(--space-6);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .hero__search-segment:last-of-type {
    border-bottom: none;
  }

  .hero__search-btn {
    margin: var(--space-2);
    width: calc(100% - var(--space-4));
    border-radius: var(--radius-lg);
    height: 44px;
  }

  .hero__dropdown {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: 100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1001;
  }

  .properties-grid {
    grid-template-columns: 1fr;
  }

  .services__grid > *,
  .specials-grid > * {
    flex-basis: 100%;
  }

  .section__title {
    font-size: var(--text-2xl);
  }

  .services__title {
    font-size: var(--text-3xl);
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }

}

@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-4);
  }

  .hero__title {
    font-size: var(--text-2xl);
  }
}

/* ══════════════════════════════════════════════════
   PROPERTY DETAIL PAGE
   ══════════════════════════════════════════════════ */
.property-detail-page {
  padding-top: calc(var(--header-h) + var(--space-8));
  padding-bottom: var(--space-20);
  background: var(--surface-bg);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-6);
}

.breadcrumb a:hover {
  color: var(--text-strong);
}

.breadcrumb__current {
  color: var(--accent-label);
  font-weight: 500;
}

.prop-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-8);
  gap: var(--space-6);
}

.prop-header__badges {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.badge {
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
}

.badge--indigo {
  background: var(--color-indigo);
  color: var(--color-white);
}

.badge--emerald {
  background: #047857;
  color: var(--color-white);
}

.prop-header__title {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--text-strong);
  line-height: 1.2;
  margin-bottom: var(--space-2);
}

.prop-header__location {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.prop-header__location svg {
  width: 18px;
  height: 18px;
  color: var(--accent-label);
}

.prop-header__price-box {
  text-align: right;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
  min-width: 200px;
}

.prop-header__price {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--text-strong);
}

.prop-header__price-clp {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Galería de imágenes — carrusel */
.prop-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.carousel {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  background: var(--color-navy-950);
}

.carousel__viewport {
  overflow: hidden;
}

.carousel__track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/*
 * Proporción en vez de alto fijo. Con `height: 480px` el hueco quedaba en
 * 1232x480, o sea 2,57:1 — mucho más ancho que cualquier foto real. Eso venía
 * de cuando la foto se recortaba con `cover` y el desajuste no se notaba; al
 * pasar a `contain` para no comerse la marca de agua, el desajuste se volvió
 * banda oscura de ~256px a cada lado. A 16/9 el hueco mide 1232x693 y una foto
 * 3:2 se pinta a 1039x693: la banda baja a ~96px y la foto se ve bastante más
 * grande. El contenedor tope 1280px acota el alto en 693px, así que no se
 * dispara en pantallas anchas.
 */
.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  margin: 0;
}

/*
 * `contain` y no `cover`: con `cover` la foto se escala hasta llenar el hueco y
 * se recorta lo que sobra. En las panorámicas —planos de terreno, sobre todo—
 * lo que sobraba era la franja de abajo, que es justo donde va la marca de
 * agua: el cliente reportó que las fotos "salían sin marca" cuando en realidad
 * la tenían y el carrusel se la comía. Las bandas que deja `contain` quedan del
 * color de fondo de `.carousel`, que ya es navy-950.
 */
.carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}

/* ── Flechas ───────────────────────────────────────── */
.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-full);
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(6px);
  color: var(--color-white);
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.carousel__arrow svg {
  width: 22px;
  height: 22px;
}

.carousel__arrow:hover:not(:disabled) {
  background: rgba(15, 23, 42, 0.9);
}

/* Deshabilitada en los extremos: se ve que no hay más fotos en vez de
   dejar un botón que no hace nada */
.carousel__arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

.carousel__arrow--prev { left: var(--space-4); }
.carousel__arrow--next { right: var(--space-4); }

/*
 * A la izquierda y no a la derecha: la marca de agua se estampa en la esquina
 * inferior derecha de la foto, y ahí el contador se le sentaba encima y la
 * tapaba entera. Se vio en el teléfono, donde la foto llena el ancho y las dos
 * cosas terminan en el mismo punto.
 */
.carousel__counter {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(6px);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── Botón de ampliar ──────────────────────────────── */
.carousel__expand {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(6px);
  color: var(--color-white);
  cursor: pointer;
  transition: background var(--t-fast);
}

.carousel__expand:hover {
  background: rgba(15, 23, 42, 0.9);
}

.carousel__expand:focus-visible {
  outline: 2px solid var(--color-indigo-light);
  outline-offset: 2px;
}

.carousel__expand svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* En el teléfono el botón es sólo el ícono: no hay ancho para la etiqueta */
.carousel__expand-texto {
  display: none;
}

/* ── Foto a pantalla completa ──────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: rgba(2, 6, 23, 0.96);
}

/* El display: flex de arriba le ganaría al atributo del HTML */
.lightbox[hidden] {
  display: none;
}

.lightbox__figure {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
}

/*
 * `contain` y sin recortes: el sentido de esta vista es ver la foto completa,
 * que es justamente lo que el carrusel no puede dar. Se usa dvh además de vh
 * porque en el teléfono la barra del navegador se come parte del 100vh.
 */
.lightbox__img {
  max-width: 100%;
  max-height: 88vh;
  max-height: 88dvh;
  object-fit: contain;
  user-select: none;
}

.lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  cursor: pointer;
  transition: background var(--t-fast);
}

.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.24);
}

.lightbox__close svg {
  width: 22px;
  height: 22px;
}

.lightbox__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  cursor: pointer;
  transition: background var(--t-fast), opacity var(--t-fast);
}

.lightbox__arrow:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.24);
}

.lightbox__arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

.lightbox__close:focus-visible,
.lightbox__arrow:focus-visible {
  outline: 2px solid var(--color-indigo-light);
  outline-offset: 2px;
}

.lightbox__arrow svg {
  width: 24px;
  height: 24px;
}

.lightbox__counter {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* Mientras la ventana está abierta, la página de atrás no debe desplazarse */
body.lightbox-abierto {
  overflow: hidden;
}

@media (max-width: 768px) {
  /*
   * En el teléfono las flechas se sacan del costado: robarían ancho a la foto,
   * que es lo único que importa acá. Se pasa de foto deslizando el dedo.
   */
  .lightbox__arrow {
    position: absolute;
    bottom: var(--space-4);
    width: 44px;
    height: 44px;
  }

  .lightbox__arrow--prev { left: var(--space-4); }
  .lightbox__arrow--next { right: var(--space-4); }

  .lightbox__img {
    max-height: 78vh;
    max-height: 78dvh;
  }
}

/* ── Mosaico de escritorio ─────────────────────────── */
/*
 * En escritorio la galería deja de ser un carrusel y pasa a ser un mosaico, con
 * el mismo HTML: si se duplicara el markup, el navegador bajaría las dos
 * versiones de cada foto.
 *
 * El motivo del cambio: una foto sola ocupando todo el ancho siempre queda
 * demasiado alta. A 16/9 el carrusel medía 693 px y en un portátil de
 * 1366×768 —el más común— eso era el 106% de la ventana: la foto no cabía en
 * la pantalla y la tira de miniaturas quedaba bajo el pliegue. El mosaico baja
 * a ~410 px y además muestra cinco fotos en vez de una.
 *
 * Las proporciones están elegidas para que cada hueco quede cerca de 3:2, que
 * es la forma de casi todas las fotos: así el recorte es casi nulo y la marca
 * de agua de la esquina no se pierde. La foto entera igual está a un clic, en
 * la pantalla completa.
 */
@media (min-width: 769px) {
  /* El marco del carrusel estorba acá: cada pieza trae el suyo */
  .prop-gallery .carousel {
    background: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }

  .prop-gallery .carousel__viewport {
    overflow: visible;
  }

  .prop-gallery .carousel__track {
    display: grid;
    gap: var(--space-2);
    /* El JS del carrusel mueve el track. Acá mandaría la grilla al diablo: se
       bloquea desde el CSS además de guardarlo en el JS. */
    transform: none !important;
    transition: none;
  }

  .prop-gallery .carousel__slide {
    aspect-ratio: auto;
    overflow: hidden;
    border-radius: var(--radius-lg);
    cursor: zoom-in;
  }

  .prop-gallery .carousel__slide img {
    object-fit: cover;
  }

  .prop-gallery .carousel__slide:first-child {
    background: var(--color-navy-950);
  }

  .prop-gallery .carousel__slide:first-child img {
    object-fit: contain;
  }

  /* Las flechas, el contador y la tira son cosa del carrusel.
     La tira se nombra con el padre a propósito: su regla base viene más abajo
     en el archivo y, con la misma especificidad, ganaría por orden. */
  .prop-gallery .carousel__arrow,
  .prop-gallery .carousel__counter,
  .prop-gallery .prop-gallery__thumbsbar {
    display: none;
  }

  /* Cinco o más: la grande a la izquierda y cuatro en 2×2.
     A 1232 px de ancho da huecos de 608×411 y 304×202, los dos ≈3:2. */
  .prop-gallery--mosaico-5 .carousel__track {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 3 / 1;
  }

  .prop-gallery--mosaico-5 .carousel__slide:first-child {
    grid-row: span 2;
  }

  .prop-gallery--mosaico-5 .carousel__slide:nth-child(n + 6) {
    display: none;
  }

  /* Tres y cuatro comparten forma: la grande y dos apiladas. Con cuatro, la
     que sobra entra por "Ver todas" — mejor eso que un hueco desbalanceado. */
  .prop-gallery--mosaico-3 .carousel__track,
  .prop-gallery--mosaico-4 .carousel__track {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 9 / 4;
  }

  .prop-gallery--mosaico-3 .carousel__slide:first-child,
  .prop-gallery--mosaico-4 .carousel__slide:first-child {
    grid-row: span 2;
  }

  .prop-gallery--mosaico-3 .carousel__slide:nth-child(n + 4),
  .prop-gallery--mosaico-4 .carousel__slide:nth-child(n + 4) {
    display: none;
  }

  /* Dos: mitad y mitad */
  .prop-gallery--mosaico-2 .carousel__track {
    grid-template-columns: 1fr 1fr;
    aspect-ratio: 3 / 1;
  }

  /* Una sola: a todo el ancho quedaría de 821 px de alto, así que se angosta
     en vez de recortarla o dejarle bandas a los lados. */
  .prop-gallery--mosaico-1 .carousel__track {
    grid-template-columns: 1fr;
    aspect-ratio: 3 / 2;
    max-width: 820px;
    margin: 0 auto;
  }

  /* El botón pasa de ícono a pastilla, como en cualquier tienda */
  .prop-gallery .carousel__expand {
    top: auto;
    bottom: var(--space-4);
    right: var(--space-4);
    width: auto;
    height: auto;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-full);
    background: var(--color-white);
    color: var(--color-navy-900);
    font-size: var(--text-sm);
    font-weight: 600;
    box-shadow: var(--shadow-lg);
  }

  .prop-gallery .carousel__expand:hover {
    background: var(--color-slate-100);
  }

  .prop-gallery .carousel__expand-texto {
    display: inline;
  }
}

/* ── Miniaturas ────────────────────────────────────── */
/*
 * La tira va junto a sus dos botones de desplazamiento, como en cualquier
 * tienda: se ven unas pocas fotos y se recorre el resto.
 */
.prop-gallery__thumbsbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/*
 * Antes esto era un grid con `grid-auto-columns: minmax(0, 1fr)`, o sea que las
 * columnas se repartían el ancho entre TODAS las fotos. Con 26 fotos cada
 * columna quedaba en ~46px, pero la miniatura tiene 120px de ancho mínimo: no
 * cabía en su columna, se desbordaba y se montaba encima de la siguiente. Con
 * pocas fotos no se notaba, y de ahí que sólo apareciera en las publicaciones
 * grandes. Con flex cada miniatura conserva su ancho y la tira se desplaza.
 */
.prop-gallery__thumbs {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: var(--space-1);
  scrollbar-width: thin;
}

.prop-gallery__thumb {
  flex: 0 0 120px;
  height: 110px;
  padding: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  border: 2px solid transparent;
  background: none;
  transition: opacity var(--t-fast), border-color var(--t-fast);
}

.prop-gallery__thumb:hover,
.prop-gallery__thumb.active {
  opacity: 1;
  border-color: var(--color-indigo-light);
}

.prop-gallery__thumb:focus-visible,
.carousel__arrow:focus-visible {
  outline: 2px solid var(--color-indigo-light);
  outline-offset: 2px;
}

/*
 * Acá sí queda `cover`: una miniatura de 120×110 con la foto entera dejaría
 * bandas por todos lados y la tira se vería sucia. Lo que importa que se vea
 * completo es la foto grande, no el índice.
 */
.prop-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Botones para recorrer la tira ─────────────────── */
/* Se ocultan solos cuando las fotos caben sin desplazar (lo decide el JS). */
.prop-gallery__scroll {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 110px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--text-body);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), opacity var(--t-fast);
}

/*
 * Sin esto el `hidden` del HTML no serviría de nada: el `display: flex` de
 * arriba le gana a la regla que el navegador aplica por el atributo.
 */
.prop-gallery__scroll[hidden] {
  display: none;
}

.prop-gallery__scroll:hover:not(:disabled) {
  background: var(--surface-muted-hover);
  color: var(--text-strong);
}

.prop-gallery__scroll:disabled {
  opacity: 0.3;
  cursor: default;
}

.prop-gallery__scroll:focus-visible {
  outline: 2px solid var(--color-indigo-light);
  outline-offset: 2px;
}

.prop-gallery__scroll svg {
  width: 18px;
  height: 18px;
}

/* Quien pidió menos animación no recibe el deslizamiento */
@media (prefers-reduced-motion: reduce) {
  .carousel__track {
    transition: none;
  }
}

@media (max-width: 768px) {
  /*
   * En el teléfono, 3/2 y no 16/9: es la proporción de casi todas las fotos,
   * así que la foto llena el ancho completo y no queda banda a los lados, que
   * es donde más duele con la pantalla angosta.
   */
  .carousel__slide {
    aspect-ratio: 3 / 2;
  }

    /* Defecto C: se mantienen en 44×44, la regla original los
       reducía a 38×38 y quedaban bajo el mínimo táctil */

  .prop-gallery__thumb {
    flex: 0 0 92px;
    height: 74px;
  }

  /*
   * En el teléfono los botones sobran: no hay ancho que regalarles y ahí se
   * recorre la tira con el dedo, que es lo natural. La tira queda igual de
   * deslizable sin ellos.
   */
  .prop-gallery__scroll {
    display: none;
  }
}

/* Barra de Especificaciones */
.prop-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-10);
}

.spec-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.spec-item svg {
  width: 28px;
  height: 28px;
  color: var(--accent-label);
  flex-shrink: 0;
}

.spec-item__value {
  display: block;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.2;
}

.spec-item__label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Layout 2 columnas */
.prop-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-10);
  align-items: start;
}

/* Defecto B: los hijos de grid traen min-width:auto por defecto.
   Si un descendiente es más ancho que la columna (p.ej. un textarea con
   cols por defecto o una grilla de features), estira toda la fila.
   min-width:0 permite que el grid los contenga. */
.prop-layout > * {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.prop-section {
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
}

.prop-section__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: var(--space-3);
}

/*
 * Se corta a siete líneas y se despliega con el botón. Una descripción larga
 * empujaba las características y el mapa muy abajo, y el visitante llegaba al
 * mapa sólo si tenía paciencia.
 */
.prop-description {
  font-size: var(--text-base);
  color: var(--text-body);
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prop-description.abierta {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.prop-description__mas {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  background: none;
  color: var(--text-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.prop-description__mas:hover {
  background: var(--surface-muted);
  color: var(--text-strong);
}

.prop-description__mas:focus-visible {
  outline: 2px solid var(--color-indigo-light);
  outline-offset: 2px;
}

.prop-description__mas[hidden] {
  display: none;
}

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

.feature-tag {
  background: rgba(255, 255, 255, 0.04);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-body);
}

.location-map-placeholder {
  background: rgba(255, 255, 255, 0.03);
  border: 2px dashed rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--text-muted);
}

.location-map-placeholder svg {
  width: 40px;
  height: 40px;
  color: var(--accent-label);
}

/* Sidebar Agent Card */
.agent-card {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-xl);
}

.agent-card__profile {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.agent-card__avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-indigo) 0%, var(--color-indigo-light) 100%);
  color: var(--color-white);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
}

.agent-card__name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-strong);
}

.agent-card__role {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.agent-form__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: var(--space-4);
}

.form-group {
  margin-bottom: var(--space-3);
}

.form-input {
  width: 100%;
  min-width: 0;           /* Defecto B: evita que textarea desborde la grilla */
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  color: var(--text-strong);
  font-size: var(--text-sm);
  font-family: inherit;
  transition: all var(--t-fast);
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-indigo-light);
  background: rgba(255, 255, 255, 0.1);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t-fast);
  border: none;
  text-decoration: none;
}

.btn--full {
  width: 100%;
  margin-top: var(--space-2);
}

.btn--primary {
  background: var(--color-red);
  color: var(--color-white);
}

.btn--primary:hover {
  background: var(--color-red-hover);
}

.btn--whatsapp {
  background: #0f766e;
  color: var(--color-white);
}

.btn--whatsapp:hover {
  background: #115e56;
}

@media (max-width: 900px) {
  .prop-layout {
    grid-template-columns: 1fr;
  }
  .prop-header {
    flex-direction: column;
  }
  .prop-header__price-box {
    text-align: left;
    width: 100%;
  }
  .prop-specs {
    grid-template-columns: repeat(2, 1fr);
  }
  .prop-gallery__main {
    height: 320px;
  }
}


/* ══════════════════════════════════════════════════
   CATALOG PAGE
   ══════════════════════════════════════════════════ */

/* ── Catalog Hero ─────────────────────────────── */
.catalog-hero {
  position: relative;
  height: 45vh;
  min-height: 320px;
  max-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.catalog-hero__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      175deg,
      rgba(15, 23, 42, 0.85) 0%,
      rgba(15, 23, 42, 0.65) 40%,
      rgba(15, 23, 42, 0.45) 100%
    ),
    url('../images/hero-catalogo.jpg') center/cover no-repeat;
}

.catalog-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 var(--space-6);
}

.catalog-hero__label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  /* Esta pastilla va sobre la foto del hero, asi que el indigo va fijo en su
     version clara. Con --accent-label seguia al tema y en modo claro quedaba
     el indigo oscuro (#4f46e5) sobre la foto. En el resto del sitio, donde el
     fondo si cambia, --accent-label se queda como esta. */
  color: var(--color-indigo-light);
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-5);
  border: 1px solid rgba(129, 140, 248, 0.3);
  border-radius: var(--radius-full);
  background: rgba(99, 102, 241, 0.1);
}

.catalog-hero__title {
  font-size: var(--text-5xl);
  font-weight: 800;
  color: var(--color-white);
  margin-bottom: var(--space-4);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.catalog-hero__subtitle {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}


/* ── Catalog Section ──────────────────────────── */
.catalog-section {
  background: var(--surface-bg);
  padding: var(--space-12) 0 var(--space-20);
}


/* ── Filter Bar ───────────────────────────────── */
.catalog-filters {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-8);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  margin-top: calc(-1 * var(--space-16));
  position: relative;
  z-index: 10;
  margin-bottom: var(--space-8);
  border: 1px solid var(--border-color);
}

.catalog-filters__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.catalog-filters__search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--surface-muted);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-full);
  transition: all var(--t-fast);
}

.catalog-filters__search:focus-within {
  border-color: var(--color-indigo);
  background: var(--surface-card);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.catalog-filters__search svg {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.catalog-filters__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--text-strong);
  outline: none;
}

.catalog-filters__input::placeholder {
  color: var(--text-muted);
}

.catalog-filters__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Filter Select */
/*
  El `min-width` no es decorativo: como los controles van con `flex: 1` en una
  fila, se encogen hasta el ancho que se les permita, y un `<select>` que no
  alcanza no achica su letra ni la parte en dos lineas — la recorta. Con 140px
  se leia "Tipo de propiedac" y "Venta y ar". El piso de cada uno es el largo
  de su rotulo mas los 48px que se llevan el relleno y la flechita.
*/
.filter-select {
  position: relative;
  flex: 1;
  min-width: 175px;
}

/* "Estacionamientos" es el rotulo mas largo de la segunda fila: 170px lo
   dejaban entrando por 2px, y basta con que no cargue la tipografia del sitio
   y entre la de respaldo para que se recorte igual. */
.filter-select--compact {
  min-width: 180px;
  flex: 0.7;
}

.filter-select--sort {
  min-width: 160px;
  flex: none;
}

.filter-select select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: var(--space-3) var(--space-8) var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-family: inherit;
  font-weight: 500;
  color: var(--text-body);
  background: var(--surface-muted);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--t-fast);
}

.filter-select select:focus {
  outline: none;
  border-color: var(--color-indigo);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.filter-select__icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

/* Filter Input (price) */
.filter-input-group {
  flex: 0.8;
  min-width: 100px;
}

.filter-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-family: inherit;
  font-weight: 500;
  color: var(--text-body);
  background: var(--surface-muted);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition: all var(--t-fast);
}

.filter-input:focus {
  outline: none;
  border-color: var(--color-indigo);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.filter-input::placeholder {
  color: var(--text-muted);
}

/* Search Button */
.catalog-filters__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--color-red);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: 700;
  font-family: inherit;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
  flex-shrink: 0;
}

.catalog-filters__btn:hover {
  background: var(--color-red-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.catalog-filters__btn svg {
  width: 16px;
  height: 16px;
}


/* ── Results Header ───────────────────────────── */
.catalog-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.catalog-results-header__info {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.catalog-results-header__count {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-strong);
}

.catalog-results-header__clear {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-red);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(220, 38, 38, 0.06);
  transition: all var(--t-fast);
}

.catalog-results-header__clear:hover {
  background: rgba(220, 38, 38, 0.12);
}

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

.catalog-results-header__sort label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}


/* ── Active Filters ───────────────────────────── */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.active-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-4);
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent-label);
}

.active-filter-tag button {
  background: none;
  border: none;
  color: var(--accent-label);
  font-size: var(--text-lg);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color var(--t-fast);
}

.active-filter-tag button:hover {
  color: var(--color-red);
}


/* ── Catalog Grid ─────────────────────────────── */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}


/* ── Catalog Card ─────────────────────────────── */
.catalog-card {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: all var(--t-base);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-soft);
}

.catalog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
  border-color: transparent;
}

/* Card Image */
.catalog-card__image-wrap {
  display: block;
  position: relative;
  height: 240px;
  overflow: hidden;
}

.catalog-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.catalog-card:hover .catalog-card__image-wrap img {
  transform: scale(1.06);
}

.catalog-card__overlay {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  display: flex;
  gap: var(--space-2);
  z-index: 2;
}

.catalog-card__badge {
  background: var(--color-indigo);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  letter-spacing: 0.3px;
}

.catalog-card__status-badge {
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
}

.catalog-card__status-badge--disponible {
  background: #047857;
  color: var(--color-white);
}

.catalog-card__status-badge--vendida {
  background: var(--color-red);
  color: var(--color-white);
}

.catalog-card__status-badge--arrendada {
  background: #b45309;
  color: var(--color-white);
}

/* Favorite Heart */
.catalog-card__favorite {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--t-fast);
  z-index: 2;
}

.catalog-card__favorite svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: all var(--t-fast);
}

.catalog-card__favorite:hover {
  background: var(--surface-card);
  transform: scale(1.1);
}

.catalog-card__favorite:hover svg {
  color: var(--color-red);
}

.catalog-card__favorite.active svg {
  fill: var(--color-red);
  color: var(--color-red);
}

/* Card Body */
.catalog-card__body {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.catalog-card__top {
  flex: 1;
}

.catalog-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}

.catalog-card__title a {
  color: var(--text-strong);
  text-decoration: none;
  transition: color var(--t-fast);
}

.catalog-card__title a:hover {
  color: var(--accent-label);
}

.catalog-card__location {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

/* Price */
.catalog-card__price-row {
  margin-bottom: var(--space-4);
}

.catalog-card__price {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--text-strong);
}

/* Specs */
.catalog-card__specs {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: var(--space-4);
}

.catalog-card__spec {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
}

.catalog-card__spec svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

/* CTA */
.catalog-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--solid-bg);
  color: var(--solid-text);
  font-size: var(--text-sm);
  font-weight: 700;
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: all var(--t-fast);
}

.catalog-card__cta:hover {
  background: var(--color-indigo);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.catalog-card__cta svg {
  transition: transform var(--t-fast);
}

.catalog-card__cta:hover svg {
  transform: translateX(3px);
}


/* ── Empty State ──────────────────────────────── */
.catalog-empty {
  text-align: center;
  padding: var(--space-20) var(--space-8);
}

.catalog-empty__icon {
  color: var(--text-body);
  margin-bottom: var(--space-6);
}

.catalog-empty__title {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--text-strong);
  margin-bottom: var(--space-3);
}

.catalog-empty__text {
  font-size: var(--text-base);
  color: var(--text-muted);
  max-width: 450px;
  margin: 0 auto var(--space-8);
  line-height: 1.7;
}


/* ── Catalog Responsive ───────────────────────── */
@media (max-width: 1024px) {
  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .catalog-filters__row {
    flex-wrap: wrap;
  }

  .filter-select,
  .filter-input-group {
    min-width: calc(50% - var(--space-3));
    flex: none;
    width: calc(50% - var(--space-3));
  }

  .filter-select--compact {
    min-width: calc(50% - var(--space-3));
    width: calc(50% - var(--space-3));
  }

  .catalog-filters__btn {
    width: 100%;
    justify-content: center;
    padding: var(--space-4) var(--space-6);
  }
}

@media (max-width: 768px) {
  .catalog-hero__label {
    display: none;
  }

  .catalog-hero__title {
    font-size: var(--text-xl);
    margin-bottom: 0;
  }

  .catalog-hero__subtitle {
    display: none;
  }

  .catalog-hero {
    height: auto;
    min-height: 0;
    padding-top: calc(var(--header-h) + var(--space-2));
    padding-bottom: var(--space-2);
  }

  .catalog-section {
    padding-top: var(--space-2);
  }

  .catalog-grid {
    grid-template-columns: 1fr;
  }

  .catalog-filters {
    padding: var(--space-3);
    margin-top: 0;
    margin-bottom: var(--space-2);
  }

  .catalog-filters__toggle {
    margin-bottom: 0;
  }

  .catalog-results-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: var(--space-2);
  }

  .filter-select,
  .filter-input-group,
  .filter-select--compact {
    width: 100%;
    min-width: 100%;
  }

  /*
    El desplegable de ordenar también lleva la clase `.filter-select`, así que
    la regla de arriba le daba `width: 100%`. Pero ese no está solo en su fila:
    comparte `.catalog-results-header__sort` con el conmutador de moneda y dos
    rótulos. Pedir el 100% del ancho estando después de todo eso lo empujaba
    fuera de la pantalla, y el catálogo quedaba con scroll horizontal en el
    teléfono: 742px de documento en una ventana de 485px.

    Acá tiene que repartirse el espacio que sobra, no reclamarlo entero.
  */
  .catalog-results-header__sort {
    width: 100%;
    flex-wrap: wrap;
  }

  .filter-select--sort {
    width: auto;
    min-width: 0;
    flex: 1;
  }
}

@media (max-width: 480px) {
  .catalog-hero__title {
    font-size: var(--text-2xl);
  }

  .catalog-filters {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
  }

  .catalog-card__specs {
    gap: var(--space-3);
    flex-wrap: wrap;
  }
}


/* ═══════════════════════════════════════════════════════
 *  FASE 1 — Cuentas de clientes, favoritos y modal
 * ═══════════════════════════════════════════════════════ */

/* ── Menú de usuario en el header ─────────────────── */

.user-menu {
  position: relative;
}

.user-menu__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  /* Esta es la variante sobre el header transparente, o sea encima de la foto
     oscura del hero. Con `inherit` tomaba --text-body y en modo claro el nombre
     salia azul marino sobre la foto: ilegible. La variante solida lo pisa abajo. */
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--t-fast);
}

.user-menu__trigger:hover {
  background: rgba(255, 255, 255, 0.16);
}

.header--solid .user-menu__trigger {
  background: var(--surface-muted);
  border-color: var(--border-color);
  color: var(--text-strong);
}

.header--solid .user-menu__trigger:hover {
  background: var(--surface-muted-hover);
}

.user-menu__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-indigo), var(--color-indigo-light));
  border-radius: 50%;
}

.user-menu__name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu__caret {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--t-fast);
}

.user-menu.open .user-menu__caret {
  transform: rotate(180deg);
}

.user-menu__dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 260px;
  padding: var(--space-2);
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 20px 45px var(--shadow-raised);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  z-index: 120;
}

.user-menu.open .user-menu__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-menu__head {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: var(--space-2);
}

.user-menu__head-name {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-strong);
}

.user-menu__head-email {
  margin: 2px 0 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left;
  color: var(--text-body);
  background: none;
  border: none;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.user-menu__item svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--text-subtle);
}

.user-menu__item:hover {
  background: var(--surface-muted);
}

.user-menu__item--danger {
  color: var(--color-red);
}

.user-menu__item--danger svg {
  color: var(--color-red);
}

.user-menu__item--danger:hover {
  background: rgba(220, 38, 38, 0.08);
}

.user-menu__count {
  margin-left: auto;
  min-width: 22px;
  padding: 2px 7px;
  font-size: var(--text-xs);
  font-weight: 800;
  text-align: center;
  color: var(--color-white);
  background: var(--color-indigo);
  border-radius: var(--radius-full);
}

.user-menu__divider {
  height: 1px;
  margin: var(--space-2) var(--space-3);
  background: var(--surface-muted);
}

/* ── Modal: login requerido ───────────────────────── */

.login-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 2000;
}

.login-modal[hidden] {
  display: none;
}

.login-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: loginModalFade 0.25s ease;
}

.login-modal__card {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: var(--space-8);
  text-align: center;
  background: var(--surface-card);
  border-radius: 24px;
  box-shadow: 0 30px 70px rgba(2, 6, 23, 0.45);
  animation: loginModalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes loginModalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes loginModalIn {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.login-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 32px;
  height: 32px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-subtle);
  background: var(--surface-muted);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--t-fast);
}

.login-modal__close:hover {
  background: var(--surface-muted-hover);
  color: var(--text-strong);
}

.login-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto var(--space-5);
  background: rgba(220, 38, 38, 0.09);
  border-radius: 50%;
}

.login-modal__icon svg {
  width: 34px;
  height: 34px;
  color: var(--color-red);
}

.login-modal__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}

.login-modal__text {
  margin: 0 0 var(--space-6);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-muted);
}

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

.login-modal__btn {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border-radius: 12px;
  transition: all var(--t-fast);
}

.login-modal__btn--primary {
  color: var(--color-white);
  background: var(--color-red);
}

.login-modal__btn--primary:hover {
  background: var(--color-red-hover);
  transform: translateY(-1px);
}

.login-modal__btn--ghost {
  color: var(--text-strong);
  background: var(--surface-muted);
}

.login-modal__btn--ghost:hover {
  background: var(--surface-muted-hover);
}

body.modal-open {
  overflow: hidden;
}

/* ── Toasts ───────────────────────────────────────── */

.toast-stack {
  position: fixed;
  top: 90px;
  right: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 340px;
  z-index: 2100;
  pointer-events: none;
}

.toast {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-strong);
  background: var(--surface-card);
  border-left: 4px solid var(--color-indigo);
  border-radius: 12px;
  box-shadow: 0 12px 32px var(--shadow-raised);
  animation: toastIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

.toast--success { border-left-color: #059669; }
.toast--error   { border-left-color: var(--color-red); }
.toast--warning { border-left-color: #d97706; }

.toast.toast--leaving {
  animation: toastOut 0.3s ease forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
  to { opacity: 0; transform: translateX(24px); }
}

/* ── Corazón de favorito en las cards del home ────── */

.property-card__favorite svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: all var(--t-fast);
}

.property-card__favorite:hover svg {
  color: var(--color-red);
}

.property-card__favorite.active svg,
.catalog-card__favorite.active svg {
  fill: var(--color-red);
  color: var(--color-red);
}

.catalog-card__favorite.is-busy,
.property-card__favorite.is-busy {
  opacity: 0.6;
  pointer-events: none;
}

@keyframes favPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.catalog-card__favorite.fav-pop,
.property-card__favorite.fav-pop {
  animation: favPop 0.35s ease;
}

/* ── Página de perfil / favoritos ─────────────────── */

.profile-page {
  padding: 140px 0 4rem;
  min-height: 70vh;
  background: var(--surface-bg);
}

.profile-header {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: 2.5rem;
}

.profile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-indigo), var(--color-indigo-light));
  border-radius: 50%;
}

.profile-name {
  margin: 0 0 4px;
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.profile-email {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.profile-badge {
  display: inline-block;
  padding: 3px var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent-label);
  background: rgba(99, 102, 241, 0.1);
  border-radius: var(--radius-full);
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
}

.profile-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}

.profile-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px var(--shadow-card);
}

.profile-card__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.profile-card__value {
  margin: 0;
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text-strong);
}

.profile-card__value-sm {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-strong);
}

.profile-card__desc {
  margin: var(--space-2) 0 var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-muted);
}

.profile-data {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  align-items: baseline;
}

.profile-data dt {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-subtle);
  white-space: nowrap;
}

.profile-data dd {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

.profile-card__link {
  margin-top: auto;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-red);
  text-decoration: none;
}

.profile-card__link:hover {
  text-decoration: underline;
}

/* ── Responsive ───────────────────────────────────── */

@media (max-width: 900px) {
  .user-menu {
    width: 100%;
  }

  .user-menu__trigger {
    width: 100%;
    justify-content: flex-start;
  }

  .user-menu__name {
    max-width: none;
  }

  .user-menu__dropdown {
    position: static;
    width: 100%;
    margin-top: var(--space-2);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }

  .user-menu.open .user-menu__dropdown {
    display: block;
  }

  .toast-stack {
    top: auto;
    bottom: var(--space-4);
    left: var(--space-4);
    right: var(--space-4);
    max-width: none;
  }
}

@media (max-width: 600px) {
  .profile-page {
    padding-top: 110px;
  }

  .profile-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .profile-name {
    font-size: var(--text-2xl);
  }

  .login-modal__card {
    padding: var(--space-6);
  }
}


/* ═══════════════════════════════════════════════════════
 *  Formularios del perfil (tema claro, dentro de base.html)
 * ═══════════════════════════════════════════════════════ */

.container--narrow {
  max-width: 640px;
}

.profile-header__action {
  margin-left: auto;
  flex-shrink: 0;
}

.form-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--t-fast);
}

.form-back svg {
  width: 15px;
  height: 15px;
}

.form-back:hover {
  color: var(--text-strong);
}

.form-page__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.form-page__subtitle {
  margin: 0 0 var(--space-8);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-muted);
}

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

/* ── Tarjeta contenedora ──────────────────────────── */

.form-card {
  padding: var(--space-8);
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
}

.form-card + .form-card {
  margin-top: var(--space-6);
}

.form-card--muted {
  background: var(--surface-muted);
  border-color: var(--border-color);
}

.form-card__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--text-strong);
}

.form-card__text {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-muted);
}

.form-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-soft);
}

.form-card__sep {
  color: var(--text-subtle);
}

/* ── Campos ───────────────────────────────────────── */

.settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
}

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

.form-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.form-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-main);
  font-size: var(--text-sm);
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.form-input::placeholder {
  color: var(--text-subtle);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-indigo);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14);
}

/* Un dato que se muestra pero no se edita acá (el RUT en la firma del
   contrato): se ve como campo para que quede claro que es un dato tuyo, y
   apagado para que quede claro que se cambia en otra parte. */
.form-input:disabled {
  color: var(--text-muted);
  background: var(--surface-muted);
  cursor: not-allowed;
}

.form-input--code {
  text-align: center;
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  padding: var(--space-4);
  font-variant-numeric: tabular-nums;
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--text-subtle);
}

.form-error {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-red);
}

/* Campos secundarios que se pliegan: están disponibles sin ocupar la pantalla
   de quien no los necesita. Usa <details>, así que funciona sin JavaScript. */
.form-details {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-muted);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.form-details > summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-subtle);
  list-style-position: inside;
}

.form-details > summary:hover {
  color: var(--text-strong);
}

.form-details[open] > summary {
  margin-bottom: var(--space-3);
}

.form-details > .form-hint {
  display: block;
  margin: 0 0 var(--space-3);
}

.form-alert {
  padding: var(--space-4);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  border-left: 3px solid;
}

.form-alert p {
  margin: 0;
}

.form-alert--error {
  color: #991b1b;
  background: rgba(220, 38, 38, 0.08);
  border-color: var(--color-red);
}

/* Celular con prefijo +56 fijo */
.form-phone {
  display: flex;
  align-items: stretch;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.form-phone:focus-within {
  border-color: var(--color-indigo);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14);
}

.form-phone__prefix {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3) 0 var(--space-4);
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-muted);
  border-right: 1px solid var(--border-color);
  user-select: none;
}

.form-phone__prefix::before {
  content: '🇨🇱';
  font-size: var(--text-base);
}

.form-input--phone {
  border: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  letter-spacing: 0.04em;
}

.form-input--phone:focus {
  box-shadow: none;
}

/* ── Acciones ─────────────────────────────────────── */

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

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

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

.form-link-btn {
  padding: 0;
  font-family: var(--font-main);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-red);
  background: none;
  border: none;
  cursor: pointer;
}

.form-link-btn:hover {
  text-decoration: underline;
}

.form-link-btn--muted {
  color: var(--text-muted);
}

/* ── Responsive ───────────────────────────────────── */

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  .form-card {
    padding: var(--space-6) var(--space-5);
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions .btn {
    width: 100%;
  }

  .profile-header__action {
    margin-left: 0;
    width: 100%;
  }

  .form-input--code {
    font-size: var(--text-xl);
    letter-spacing: 0.35em;
    text-indent: 0.35em;
  }
}


/* ═══════════════════════════════════════════════════════
 *  PANEL — Ejecutivos y administradores
 * ═══════════════════════════════════════════════════════ */

.panel {
  padding: 130px 0 var(--space-16);
  min-height: 80vh;
  background: var(--surface-bg);
  /* El `body` del sitio público es oscuro y pinta el texto de blanco. El panel
     cambiaba el fondo a claro pero NO el color, así que cada elemento de aquí
     dentro tenía que acordarse de definir el suyo. El que se olvidaba no se veía
     mal: desaparecía —blanco sobre blanco—, que es peor, porque nadie lo nota
     hasta que alguien pregunta por qué falta un nombre.

     Lo que va sobre fondo oscuro dentro del panel (botones, avatares, etiquetas
     de estado, el contador del menú) ya define su propio color, así que cortar
     la herencia acá no afecta a nada. */
  color: var(--text-body);
}

/* ── Barra superior del panel ─────────────────────── */

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

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

.panel__badge {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--solid-text);
  background: var(--solid-bg);
  border-radius: var(--radius-full);
}

.panel__role {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
}

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

.panel__nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: all var(--t-fast);
}

.panel__nav-link:hover {
  background: var(--surface-muted);
  color: var(--text-strong);
}

.panel__nav-link.active {
  background: var(--solid-bg);
  color: var(--solid-text);
}

.panel__nav-count {
  min-width: 20px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  color: var(--color-white);
  background: var(--color-red);
  border-radius: var(--radius-full);
}

.panel__nav-cta {
  margin-left: var(--space-2);
}

/* ── Menús agrupados de la cinta ──────────────────
   El formato es el de solotodo.cl: una carta colgando del disparador, con un
   título gris arriba, la lista de enlaces debajo y al final el enlace rojo a la
   sección completa. Los colores salen de los tokens semánticos, no de la paleta
   directa, así que la carta sigue el tema: clara en modo claro y oscura en modo
   oscuro, igual que el menú de usuario del header.

   Cada grupo es un <details>, o sea que el navegador ya sabe abrirlo y cerrarlo
   y el menú funciona sin JavaScript. El marcador triangular por defecto hay que
   apagarlo dos veces: WebKit usa un pseudo-elemento distinto al del resto. */
.panel__menu {
  position: relative;
}

.panel__menu > summary {
  gap: var(--space-2);
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
}

.panel__menu > summary::-webkit-details-marker {
  display: none;
}

.panel__menu > summary::marker {
  content: '';
}

.panel__nav-caret {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform var(--t-fast);
}

.panel__menu[open] > summary .panel__nav-caret {
  transform: rotate(180deg);
}

.panel__menu-list {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 120;
  min-width: 240px;
  padding: var(--space-4) var(--space-3) var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 50px var(--shadow-card);
}

/* El hueco entre el disparador y la carta rompía el hover: al bajar el mouse
   se pasaba por encima de la página y el menú se cerraba en el camino. Este
   puente invisible tapa esos 10px. */
.panel__menu-list::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

/* El botón de publicar es el último de la fila: su menú se alinea al borde
   derecho para no salirse de la pantalla. */
.panel__menu--end .panel__menu-list {
  left: auto;
  right: 0;
}

.panel__menu-title {
  margin: 0 0 var(--space-2);
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.panel__menu-link {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-body);
  text-decoration: none;
  border-radius: var(--radius-md);
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}

.panel__menu-link:hover {
  background: var(--surface-muted);
  color: var(--text-strong);
}

.panel__menu-link.active {
  background: var(--solid-bg);
  color: var(--solid-text);
}

/* El enlace a la sección completa, como el "Ver todos" de la referencia. */
.panel__menu-all {
  display: block;
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-1);
  border-top: 1px solid var(--border-soft);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-red);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast);
}

.panel__menu-all:hover {
  color: var(--color-red-hover);
}

/* Dentro del desplegable el enlace es un bloque, no un flex: el contador
   necesita volver a ser caja para que su ancho mínimo cuente. */
.panel__menu-link .panel__nav-count {
  display: inline-block;
  margin-left: var(--space-2);
  vertical-align: middle;
}

.panel__head {
  margin-bottom: var(--space-8);
}

.panel__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.panel__subtitle {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.panel__section-title {
  margin: var(--space-12) 0 var(--space-5);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--text-strong);
}

/* ── Métricas ─────────────────────────────────────── */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-lg);
}

.stat-tile__value {
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: 1;
  color: var(--text-strong);
}

.stat-tile__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
}

.stat-tile--ok   { border-left-color: #059669; }
.stat-tile--wait { border-left-color: #d97706; }
.stat-tile--bad  { border-left-color: var(--color-red); }
.stat-tile--fav  { border-left-color: var(--color-indigo); }

/* ── Filtros ──────────────────────────────────────── */

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

.panel__search {
  max-width: 420px;
}

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

.chip {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all var(--t-fast);
}

.chip:hover {
  border-color: var(--text-subtle);
  color: var(--text-strong);
}

.chip--active {
  color: var(--solid-text);
  background: var(--solid-bg);
  border-color: var(--text-strong);
}

/* ── Estados de publicación ───────────────────────── */

.pub-status {
  display: inline-block;
  padding: 3px var(--space-3);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
}

.pub-status--borrador  { color: #475569; background: #e2e8f0; }
.pub-status--pendiente { color: #92400e; background: #fef3c7; }
.pub-status--aprobada  { color: #065f46; background: #d1fae5; }
.pub-status--rechazada { color: #991b1b; background: #fee2e2; }
.pub-status--archivada { color: #475569; background: #f1f5f9; }

.pub-tag {
  display: inline-block;
  padding: 3px var(--space-3);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface-muted);
  border-radius: var(--radius-full);
}

.pub-tag--off {
  color: #991b1b;
  background: #fee2e2;
}

/* ── Listado de publicaciones ─────────────────────── */

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

.pub-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
}

.pub-row:hover {
  border-color: var(--text-subtle);
  box-shadow: 0 8px 24px var(--shadow-card);
}

.pub-row--review {
  border-left: 3px solid #d97706;
}

.pub-row__main {
  flex: 1;
  min-width: 0;
}

.pub-row__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.pub-row__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.35;
  /* No siempre lleva un enlace dentro: en Equipo y en Consultas es texto
     pelado, y la regla de abajo sólo alcanza al `a`. */
  color: var(--text-strong);
}

.pub-row__title a {
  color: var(--text-strong);
  text-decoration: none;
}

.pub-row__title a:hover {
  color: var(--color-red);
}

.pub-row__meta {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.pub-row__meta--dim {
  font-size: var(--text-xs);
  color: var(--text-subtle);
}

.pub-row__reject {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: #991b1b;
  background: rgba(220, 38, 38, 0.07);
  border-left: 3px solid var(--color-red);
  border-radius: var(--radius-sm);
}

.pub-row__warn {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  border-radius: var(--radius-sm);
}

.pub-row__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex-shrink: 0;
}

.pub-row__actions form {
  margin: 0;
}

/* ── Ficha de publicación ─────────────────────────── */

.pub-head {
  margin-bottom: var(--space-5);
}

.pub-head .pub-status {
  margin-bottom: var(--space-3);
}

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

.pub-detail__main,
.pub-detail__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.pub-detail .form-card + .form-card {
  margin-top: 0;
}

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

.action-stack form {
  margin: 0;
}

.action-stack .btn {
  width: 100%;
}

.delete-summary {
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-soft);
}

/* ── Fotos ────────────────────────────────────────── */

.thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid transparent;
}

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

.thumb--cover {
  border-color: var(--color-indigo);
}

.thumb__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  padding: 2px var(--space-2);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-indigo);
  border-radius: var(--radius-full);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
}

.photo {
  position: relative;
  background: var(--surface-muted);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.photo--cover {
  border-color: var(--color-indigo);
}

.photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.photo__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: 3px var(--space-3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-indigo);
  border-radius: var(--radius-full);
}

.photo__actions {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-card);
}

.photo__actions form {
  margin: 0;
  flex: 1;
}

.photo__btn {
  width: 100%;
  padding: var(--space-2);
  font-family: var(--font-main);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-strong);
  background: var(--surface-muted);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--t-fast);
}

.photo__btn:hover {
  background: var(--surface-muted-hover);
}

.photo__btn--danger {
  color: var(--color-red);
}

.photo__btn--danger:hover {
  background: rgba(220, 38, 38, 0.1);
}

.form-file {
  width: 100%;
  padding: var(--space-4);
  font-family: var(--font-main);
  font-size: var(--text-sm);
  color: var(--text-muted);
  background: var(--surface-bg);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.form-file:hover {
  border-color: var(--color-indigo);
}

/* ── Extras de formulario para el panel ───────────── */

.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--surface-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

.form-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.input-with-unit {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: var(--space-2);
  align-items: center;
}

@media (max-width: 640px) {
  .input-with-unit {
    grid-template-columns: 1fr 130px;
  }
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.form-check span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-sm);
  color: var(--text-strong);
}

.form-check em {
  font-style: normal;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.form-checkbox {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-indigo);
  cursor: pointer;
}

.settings-form .form-card {
  padding: var(--space-6);
}

/* Separación vertical entre los bloques del formulario.
   El «>» es lo importante: sin él, `.form-field + .form-field` también alcanza
   a los campos que van lado a lado dentro de una fila. En un grid ese
   margen superior desplaza la columna dentro de su celda, así que todas menos
   la primera quedaban 20 px más abajo — las casillas escalonadas. */
.settings-form .form-card > .form-field + .form-field,
.settings-form .form-card > .form-row,
.settings-form .form-card > .form-grid-3,
.settings-form .form-card > .form-grid-4,
.settings-form .form-card > .form-details,
.settings-form .form-card > .form-check {
  margin-top: var(--space-5);
}

.form-alert--warn {
  color: #92400e;
  background: #fef3c7;
  border-color: #d97706;
}

.form-alert--ok {
  color: #065f46;
  background: #d1fae5;
  border-color: #059669;
}

.form-alert--ok a {
  color: #047857;
  font-weight: 700;
}

.form-alert--muted {
  color: var(--text-muted);
  background: var(--surface-muted);
  border-color: var(--text-subtle);
}

.form-alert__meta {
  margin-top: var(--space-2) !important;
  font-size: var(--text-xs);
  opacity: 0.75;
}

.form-alert p + p {
  margin-top: var(--space-2);
}

/* ── Botones extra ────────────────────────────────── */

.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
}

.btn--danger {
  color: var(--color-white);
  background: var(--color-red);
}

.btn--danger:hover {
  background: var(--color-red-hover);
}

.btn--success {
  color: var(--color-white);
  background: #059669;
}

.btn--success:hover {
  background: #10b981;
}

/* ── Empty state ──────────────────────────────────── */

.panel-empty {
  padding: var(--space-16) var(--space-6);
  text-align: center;
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
}

.panel-empty__icon svg {
  width: 56px;
  height: 56px;
  color: var(--text-subtle);
}

.panel-empty__title {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--text-strong);
}

.panel-empty__text {
  margin: 0 auto var(--space-6);
  max-width: 380px;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-muted);
}

/* ── Responsive ───────────────────────────────────── */

@media (max-width: 1024px) {
  .pub-detail {
    grid-template-columns: 1fr;
  }
}

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

  .pub-row {
    flex-direction: column;
  }

  .pub-row__actions {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

  .pub-row__actions .btn {
    flex: 1;
  }
}

@media (max-width: 600px) {
  .panel {
    padding-top: 100px;
  }

  .panel__bar {
    flex-direction: column;
    align-items: stretch;
  }

  .panel__nav {
    justify-content: flex-start;
  }

  .panel__nav-cta {
    margin-left: 0;
    width: 100%;
  }

  /* En el teléfono el desplegable no flota: empuja el contenido hacia abajo.
     Flotando se salía de la pantalla y quedaba tapado por la lista de fichas. */
  .panel__menu {
    width: 100%;
  }

  .panel__menu > summary {
    width: 100%;
    justify-content: space-between;
  }

  .panel__menu-list {
    position: static;
    min-width: 0;
    margin-top: var(--space-2);
    box-shadow: none;
  }

  .panel__menu-list::before {
    display: none;
  }

  .panel__menu-link,
  .panel__menu-all {
    white-space: normal;
  }

  .panel__title {
    font-size: var(--text-2xl);
  }

  .form-grid-4 {
    grid-template-columns: 1fr;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ── Equipo (panel del administrador) ─────────────── */

.member {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  flex: 1;
  min-width: 0;
}

.member__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-slate-500), var(--color-slate-400));
  border-radius: 50%;
}

.member__avatar--admin {
  background: linear-gradient(135deg, var(--color-indigo), var(--color-indigo-light));
}

.pub-tag--admin {
  color: var(--accent-label);
  background: rgba(99, 102, 241, 0.12);
}

.pub-row--muted {
  opacity: 0.6;
  background: var(--surface-bg);
}

.panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Varias acciones a la derecha del título. */
.panel__head-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .member {
    gap: var(--space-3);
  }

  .member__avatar {
    width: 38px;
    height: 38px;
    font-size: var(--text-sm);
  }

  .panel__head .btn {
    width: 100%;
  }

  /* En móvil los botones se apilan a lo ancho; si no, el `form` que envuelve
     al de la planilla queda con ancho propio y los deja desalineados. */
  .panel__head-actions,
  .panel__head-actions form {
    width: 100%;
  }
}


/* ── Reasignación de publicaciones ────────────────── */

.reassign-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
  max-height: 420px;
  overflow-y: auto;
}

.reassign-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.reassign-item:hover {
  border-color: var(--color-indigo);
  background: var(--surface-card);
}

.reassign-item:has(input:checked) {
  border-color: var(--color-indigo);
  background: rgba(99, 102, 241, 0.06);
}

.reassign-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.reassign-item__title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-strong);
}

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


/* ── Gráficos de barras y rankings ────────────────── */

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-6);
}

.metric-grid .form-card + .form-card {
  margin-top: 0;
}

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

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

.bar__label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-strong);
}

.bar__value {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.bar__track {
  height: 8px;
  background: var(--surface-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.bar__fill {
  height: 100%;
  background: var(--color-red);
  border-radius: var(--radius-full);
  transition: width var(--t-base);
}

.bar__fill--indigo { background: var(--color-indigo); }
.bar__fill--green  { background: #059669; }

/* ── Gráficos de consultas ────────────────────────
   Los tonos son los mismos que las etiquetas `.pub-tag--*` de la lista de
   consultas. Que el rojo signifique «sin contactar» en las dos páginas es lo
   que permite leer el gráfico sin mirar la leyenda. */
.bar__fill--off  { background: var(--color-red); }
.bar__fill--wait { background: #d97706; }
.bar__fill--info { background: var(--color-indigo); }
.bar__fill--ok   { background: #059669; }
.bar__fill--mute { background: var(--color-slate-400); }

/* Barra apilada: el reparto de estados de un ejecutivo en una sola línea. */
.stack {
  display: flex;
  height: 10px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--surface-muted);
}

.stack__seg {
  height: 100%;
  /* El ancho lo reparte flexbox con `flex-grow` = cantidad de consultas, y no
     un porcentaje calculado en Python. Con porcentajes redondeados, cinco
     tramos pueden sumar 98% y dejar un hueco gris al final de la barra que se
     lee como un estado más. Repartiendo con flex el navegador divide exacto. */
  flex-basis: 0;
  min-width: 2px;
}

.stack__seg--off  { background: var(--color-red); }
.stack__seg--wait { background: #d97706; }
.stack__seg--info { background: var(--color-indigo); }
.stack__seg--ok   { background: #059669; }
.stack__seg--mute { background: var(--color-slate-400); }

/* Leyenda compartida por los dos gráficos. */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
}

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

.legend__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.legend__dot--off  { background: var(--color-red); }
.legend__dot--wait { background: #d97706; }
.legend__dot--info { background: var(--color-indigo); }
.legend__dot--ok   { background: #059669; }
.legend__dot--mute { background: var(--color-slate-400); }

/* Columnas: consultas por mes. Se dibujan con divs y no con una librería
   porque son media docena de barras; traer 200 kB de JavaScript para esto
   sería peor que el problema que resuelve. */
.cols {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  height: 160px;
  margin-top: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-color);
}

.col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: var(--space-1);
  min-width: 0;
}

.col__value {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-strong);
}

/* La pista existe para que el alto en porcentaje de todas las barras se mida
   contra la misma caja. Sin ella el porcentaje se calcula sobre la columna
   entera, pero la barra más alta queda recortada por la etiqueta del número:
   la más alta se achica y las demás parecen más grandes de lo que son. Con la
   pista, todas se miden contra el mismo alto y la proporción es real. */
.col__track {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
}

.col__bar {
  width: 100%;
  max-width: 56px;
  background: var(--color-navy-800);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: height var(--t-base);
  /* Un mes en cero tiene que dejar rastro: sin altura mínima la columna
     desaparece y el mes parece que no existió. */
  min-height: 3px;
}

.col__bar--vacio { background: var(--surface-muted-hover); }

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

.cols-labels span {
  flex: 1;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: capitalize;
  min-width: 0;
}

:root[data-theme="dark"] .col__bar { background: var(--color-slate-400); }

@media (max-width: 600px) {
  .cols { height: 120px; }
  .cols-labels span { font-size: 0.65rem; }
}

.rank-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.rank {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-bg);
  border-radius: var(--radius-md);
}

.rank__pos {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--text-muted);
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: 50%;
}

.rank__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.rank__title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-strong);
  text-decoration: none;
}

a.rank__title:hover {
  color: var(--color-red);
}

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

.rank__value {
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--text-strong);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .metric-grid {
    grid-template-columns: 1fr;
  }
}


/* ── Publicaciones destacadas ─────────────────────── */

.pub-tag--featured {
  color: #92400e;
  background: #fef3c7;
}

.property-card__badge--featured,
.catalog-card__badge--featured {
  background: linear-gradient(135deg, #92400e, #b45309) !important;
  color: #ffffff !important;
}


/* ── Historial de moderación (timeline) ───────────── */

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

.filter-row .form-input {
  max-width: 230px;
}

.chip-row__sep {
  width: 1px;
  align-self: stretch;
  background: var(--surface-muted-hover);
  margin: 0 var(--space-2);
}

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

.timeline__item {
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  position: relative;
}

.timeline__item::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 18px;
  bottom: 0;
  width: 2px;
  background: var(--surface-muted-hover);
}

.timeline__item:last-child::before {
  display: none;
}

.timeline__dot {
  width: 12px;
  height: 12px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--border-strong);
  z-index: 1;
}

.timeline__item--creada .timeline__dot    { background: var(--color-slate-400); }
.timeline__item--enviada .timeline__dot   { background: #d97706; }
.timeline__item--aprobada .timeline__dot  { background: #059669; }
.timeline__item--rechazada .timeline__dot { background: var(--color-red); }
.timeline__item--destacada .timeline__dot { background: #f59e0b; }
.timeline__item--eliminada .timeline__dot { background: var(--solid-bg); }
.timeline__item--reasignada .timeline__dot{ background: var(--color-indigo); }

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

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

.timeline__date {
  font-size: var(--text-xs);
  color: var(--text-subtle);
}

.timeline__title {
  margin: 0 0 2px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-strong);
}

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

.timeline__title a:hover {
  color: var(--color-red);
}

.timeline__gone {
  font-weight: 400;
  color: var(--text-subtle);
}

.timeline__meta {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.timeline__note {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--text-muted);
  background: var(--surface-bg);
  border-left: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
}

/* Colores por acción en las etiquetas */
.pub-tag--creada    { color: #475569; background: #e2e8f0; }
.pub-tag--editada   { color: #475569; background: #e2e8f0; }
.pub-tag--enviada   { color: #92400e; background: #fef3c7; }
.pub-tag--aprobada  { color: #065f46; background: #d1fae5; }
.pub-tag--rechazada { color: #991b1b; background: #fee2e2; }
.pub-tag--archivada { color: #475569; background: #f1f5f9; }
.pub-tag--reasignada{ color: #3730a3; background: #e0e7ff; }
.pub-tag--destacada { color: #92400e; background: #fef3c7; }
.pub-tag--eliminada { color: #ffffff; background: #334155; }
.pub-tag--ok        { color: #065f46; background: #d1fae5; }

@media (max-width: 600px) {
  .filter-row .form-input {
    max-width: none;
    width: 100%;
  }
}


/* ── Valor de la UF ───────────────────────────────── */

.uf-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
  background: linear-gradient(135deg, var(--solid-bg), var(--surface-muted-hover));
  border-radius: var(--radius-xl);
  color: var(--solid-text);
}

.uf-hero--stale {
  background: linear-gradient(135deg, #92400e, #b45309);
}

.uf-hero__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.uf-hero__value {
  display: block;
  margin: var(--space-2) 0;
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.uf-hero__meta {
  display: block;
  font-size: var(--text-sm);
  opacity: 0.75;
}

.uf-hero__warn {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.6;
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
}

.code-block {
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  font-family: 'Courier New', monospace;
  font-size: var(--text-xs);
  color: var(--solid-text);
  background: var(--solid-bg);
  border-radius: var(--radius-md);
  overflow-x: auto;
  white-space: pre;
}

.form-card__text code,
.form-hint code {
  padding: 1px 5px;
  font-family: 'Courier New', monospace;
  font-size: 0.92em;
  background: var(--surface-muted);
  border-radius: 4px;
}


/* ═══════════════════════════════════════════════════════
 *  MODO OSCURO
 *  Se activa con data-theme="dark" en <html>. Casi todo se
 *  resuelve redefiniendo los tokens semánticos; abajo sólo
 *  van los casos que usan colores pastel fijos.
 * ═══════════════════════════════════════════════════════ */

:root[data-theme="dark"] {
  color-scheme: dark;

  --surface-bg: #0b1120;
  --surface-card: #141d2f;
  --surface-muted: #1e293b;
  --surface-muted-hover: #2c3a4f;

  --border-color: #27364b;
  --border-soft: #1e293b;
  --border-strong: #3b4c66;

  --text-strong: #f1f5f9;
  --text-body: #e2e8f0;
  --text-muted: #94a3b8;
  --text-subtle: #64748b;

  /* Los chips sólidos se invierten: claros sobre fondo oscuro */
  --solid-bg: #e2e8f0;
  --solid-text: #0f172a;

  /* Sobre fondo oscuro el acento tiene que aclararse, no oscurecerse. */
  --accent-label: var(--color-indigo-light);

  --shadow-card: rgba(0, 0, 0, 0.45);
  --shadow-raised: rgba(0, 0, 0, 0.6);
}

/* ── Estados de publicación ───────────────────────── */

:root[data-theme="dark"] .pub-status--borrador,
:root[data-theme="dark"] .pub-status--archivada,
:root[data-theme="dark"] .pub-tag--creada,
:root[data-theme="dark"] .pub-tag--editada,
:root[data-theme="dark"] .pub-tag--archivada {
  color: #cbd5e1;
  background: #334155;
}

:root[data-theme="dark"] .pub-status--pendiente,
:root[data-theme="dark"] .pub-tag--enviada,
:root[data-theme="dark"] .pub-tag--featured,
:root[data-theme="dark"] .pub-tag--destacada,
:root[data-theme="dark"] .pub-row__warn {
  color: #fcd34d;
  background: rgba(217, 119, 6, 0.22);
}

:root[data-theme="dark"] .pub-status--aprobada,
:root[data-theme="dark"] .pub-tag--aprobada,
:root[data-theme="dark"] .pub-tag--ok {
  color: #6ee7b7;
  background: rgba(5, 150, 105, 0.22);
}

:root[data-theme="dark"] .pub-status--rechazada,
:root[data-theme="dark"] .pub-tag--rechazada,
:root[data-theme="dark"] .pub-tag--off {
  color: #fca5a5;
  background: rgba(220, 38, 38, 0.2);
}

:root[data-theme="dark"] .pub-tag--reasignada,
:root[data-theme="dark"] .pub-tag--admin,
:root[data-theme="dark"] .profile-badge {
  color: #c7d2fe;
  background: rgba(99, 102, 241, 0.22);
}

:root[data-theme="dark"] .pub-tag--eliminada {
  color: #0f172a;
  background: #94a3b8;
}

:root[data-theme="dark"] .pub-row__reject {
  color: #fca5a5;
  background: rgba(220, 38, 38, 0.14);
}

/* ── Alertas y avisos ─────────────────────────────── */

:root[data-theme="dark"] .form-alert--error {
  color: #fca5a5;
  background: rgba(220, 38, 38, 0.16);
}

:root[data-theme="dark"] .form-alert--warn {
  color: #fcd34d;
  background: rgba(217, 119, 6, 0.18);
}

:root[data-theme="dark"] .form-alert--ok {
  color: #6ee7b7;
  background: rgba(5, 150, 105, 0.18);
}

:root[data-theme="dark"] .form-alert--ok a {
  color: #6ee7b7;
}

:root[data-theme="dark"] .form-alert--muted {
  color: var(--text-muted);
  background: var(--surface-muted);
  border-color: var(--border-strong);
}

:root[data-theme="dark"] .toast {
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-left-width: 4px;
}

/* ── Bloques que ya eran oscuros ──────────────────── */

:root[data-theme="dark"] .uf-hero {
  background: linear-gradient(135deg, #1e293b, #27364b);
  border: 1px solid var(--border-color);
}

:root[data-theme="dark"] .uf-hero--stale {
  background: linear-gradient(135deg, #78350f, #92400e);
  border-color: #b45309;
}

:root[data-theme="dark"] .code-block {
  color: #e2e8f0;
  background: #020617;
  border: 1px solid var(--border-color);
}

:root[data-theme="dark"] .form-card__text code,
:root[data-theme="dark"] .form-hint code {
  color: var(--text-body);
  background: var(--surface-muted);
}

/* ── Header: el menú de usuario en el estado sólido ── */

:root[data-theme="dark"] .header--solid .user-menu__trigger {
  color: var(--text-strong);
  background: var(--surface-muted);
  border-color: var(--border-color);
}

:root[data-theme="dark"] .header--solid .user-menu__trigger:hover {
  background: var(--surface-muted-hover);
}

/* ── Fotos y miniaturas ───────────────────────────── */

:root[data-theme="dark"] .photo,
:root[data-theme="dark"] .form-file {
  background: var(--surface-muted);
}

:root[data-theme="dark"] .photo__actions {
  background: var(--surface-card);
}

/* ── Modal de login ───────────────────────────────── */

:root[data-theme="dark"] .login-modal__icon {
  background: rgba(220, 38, 38, 0.18);
}

:root[data-theme="dark"] .login-modal__close {
  color: var(--text-subtle);
  background: var(--surface-muted);
}

:root[data-theme="dark"] .login-modal__close:hover {
  color: var(--text-strong);
  background: var(--surface-muted-hover);
}

/* ── Selector del formulario ──────────────────────────
   Se repiten TODAS las propiedades del fondo, no sólo la imagen: si más
   adelante alguna regla usa el atajo `background`, resetea repeat/position/
   size y la flechita se ve repetida a lo ancho del campo. */

:root[data-theme="dark"] .form-select {
  background-color: var(--surface-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

/* La lista desplegable la dibuja el sistema operativo, no hereda el tema:
   sin esto quedan letras casi blancas sobre el fondo blanco del menú. */
:root[data-theme="dark"] .form-select option,
:root[data-theme="dark"] select option {
  background-color: #1e293b;
  color: #f1f5f9;
}

:root[data-theme="dark"] .form-select option:checked {
  background-color: #334155;
  color: var(--color-white);
}

:root[data-theme="dark"] .form-input::placeholder {
  color: var(--text-subtle);
}

/* ── Botón de cambio de tema ──────────────────────── */

.theme-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left;
  color: var(--text-body);
  background: none;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--t-fast);
}

.theme-toggle:hover {
  background: var(--surface-muted);
}

.theme-toggle svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--text-subtle);
}

/* El icono y el texto cambian según el tema activo */
.theme-toggle__dark,
:root[data-theme="dark"] .theme-toggle__light {
  display: none;
}

.theme-toggle__light,
:root[data-theme="dark"] .theme-toggle__dark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.theme-toggle__switch {
  margin-left: auto;
  width: 34px;
  height: 19px;
  flex-shrink: 0;
  padding: 2px;
  background: var(--surface-muted-hover);
  border-radius: var(--radius-full);
  transition: background var(--t-fast);
}

.theme-toggle__switch::after {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  background: var(--surface-card);
  border-radius: 50%;
  transition: transform var(--t-fast);
}

:root[data-theme="dark"] .theme-toggle__switch {
  background: var(--color-indigo);
}

:root[data-theme="dark"] .theme-toggle__switch::after {
  transform: translateX(15px);
}


/* ═══════════════════════════════════════════════════════
 *  FICHA DE PROPIEDAD — datos reales
 *  ─────────────────────────────────────────────────────
 *  Componentes del detalle público (paleta directa, el sitio público es
 *  siempre claro) y del formulario del panel (tokens, sigue el modo oscuro).
 * ═══════════════════════════════════════════════════════ */

/* ── Badges que faltaban en la cabecera ───────────── */
.badge--amber {
  background: #f59e0b;
  color: var(--color-white);
}

.badge--slate {
  background: var(--surface-muted);
  color: var(--text-body);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

/* ── Precio: etiqueta y gastos comunes ────────────── */
.prop-header__price-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

.prop-header__expenses {
  font-size: var(--text-sm);
  color: var(--text-body);
  margin-top: var(--space-2);
}

/* ── Ficha técnica ────────────────────────────────── */
.spec-table {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.spec-table__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.spec-table__row:last-child {
  border-bottom: 0;
}

.spec-table__row:nth-child(odd) {
  background: rgba(255, 255, 255, 0.03);
}

.spec-table__row dt {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.spec-table__row dd {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-strong);
  text-align: right;
}

/* La ficha tecnica nacio para `property_detail`, que va sobre fondo oscuro, y
   por eso pinta el texto de blanco y dibuja los bordes con blancos translucidos.
   Dentro del panel el fondo es claro: ahi esos cuatro valores desaparecen y la
   tabla queda con las etiquetas solas, sin datos y sin lineas.

   `.panel` ya corta la herencia del color, pero no alcanza: `dd` declara el
   blanco explicitamente y una declaracion le gana a lo heredado. Hay que
   redefinir los cuatro. Afecta a `contratos/firmado.html` y a
   `contratos/detalle.html`; la ficha publica no entra por el prefijo. */
.panel .spec-table {
  border-color: var(--border-soft);
}

.panel .spec-table__row {
  border-bottom-color: var(--border-soft);
}

.panel .spec-table__row:nth-child(odd) {
  background: var(--surface-bg);
}

.panel .spec-table__row dt {
  color: var(--text-muted);
}

.panel .spec-table__row dd {
  color: var(--text-strong);
}

/* ── Equipamiento agrupado ────────────────────────── */
.features-block {
  margin-bottom: var(--space-6);
}

.features-block:last-child {
  margin-bottom: 0;
}

.features-block__title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

/* El tag ahora lleva un check: pasa a flex para alinearlo con el texto */
.feature-tag {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.feature-tag svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--accent-label);
}

/* ── Video de YouTube ─────────────────────────────── */
.prop-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-muted);
}

.prop-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Mapa ─────────────────────────────────────────── */
.location-map {
  display: block;
  width: 100%;
  height: 340px;
  border: 0;
  border-radius: var(--radius-lg);
}

.location-note {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-3);
  line-height: 1.6;
}

.location-note--empty {
  padding: var(--space-5);
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  margin-top: 0;
}

.location-note--empty strong {
  color: var(--text-strong);
}

/* ── Tarjeta del ejecutivo ────────────────────────── */
/* .agent-card ya trae su propio padding: acá sólo separamos del encabezado */
.agent-card__body {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.agent-card__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: var(--space-2);
}

.agent-card__text {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-5);
}

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

.agent-card__body .btn {
  margin-bottom: var(--space-3);
}

.agent-card__body .btn:last-child {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════
 *  FORMULARIO DEL PANEL — campos nuevos
 *  Usa tokens: sigue el modo oscuro del panel.
 * ═══════════════════════════════════════════════════════ */

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

.form-hint--block {
  display: block;
  margin-top: var(--space-2);
  line-height: 1.6;
}

.form-card__hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: calc(var(--space-3) * -1);
  margin-bottom: var(--space-5);
}

/* ── Casillas de equipamiento ─────────────────────── */
.feature-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
}

.feature-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-color);
}

.feature-group__title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

.feature-group__toggle {
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent-label);
  cursor: pointer;
  white-space: nowrap;
}

.feature-group__toggle:hover {
  text-decoration: underline;
}

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

.feature-check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.2s ease;
}

.feature-check:hover {
  background: var(--surface-muted);
}

.feature-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  accent-color: var(--color-indigo);
  cursor: pointer;
}

.feature-check span {
  font-size: var(--text-sm);
  color: var(--text-body);
  line-height: 1.4;
}

/* ── Equipamiento en la ficha del panel ───────────── */
.pub-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pub-feature {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-body);
  background: var(--surface-muted);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 768px) {
  .form-grid-3 {
    grid-template-columns: 1fr;
  }

  .spec-table__row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .spec-table__row dd {
    text-align: left;
  }

  .location-map {
    height: 260px;
  }
}

/* ── Modo oscuro (sólo lo del panel) ──────────────── */
:root[data-theme="dark"] .feature-check input[type="checkbox"] {
  accent-color: var(--color-indigo-light);
}

:root[data-theme="dark"] .feature-group__toggle {
  color: var(--color-indigo-light);
}

/* ═══════════════════════════════════════════════════════
 *  PÁGINAS DE ERROR (404 y 403)
 *  La de 500 lleva sus estilos embebidos: si algo falló en el
 *  servidor, el CSS externo también podría no llegar.
 * ═══════════════════════════════════════════════════════ */

.error-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + var(--space-12));
  padding-bottom: var(--space-20);
  background: var(--surface-bg);
}

.error-page__inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.error-page__code {
  display: block;
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text-muted);
}

.error-page__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-strong);
  margin: var(--space-4) 0 var(--space-3);
}

.error-page__text {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: var(--space-8);
}

.error-page__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

.error-page__actions .btn--ghost {
  background: transparent;
  color: var(--text-body);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.error-page__actions .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-strong);
}

.error-page__help {
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.error-page__help a {
  color: var(--accent-label);
}

/* ── Badge de venta / arriendo en las tarjetas ─────── */
.catalog-card__badge--op {
  background: rgba(15, 23, 42, 0.72);
  color: var(--color-white);
  backdrop-filter: blur(4px);
}

/* ═══════════════════════════════════════════════════════
 *  MAPA DE GOOGLE EN LA FICHA
 * ═══════════════════════════════════════════════════════ */

.location-box {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Ahora es un <div> que rellena la API de Google, no un iframe: necesita
   altura propia o queda en 0 y el mapa no se ve */
.location-map {
  width: 100%;
  height: 380px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
}

.location-map--error {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
  border: 1px dashed rgba(255, 255, 255, 0.14);
}

.location-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.location-actions__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  color: var(--text-body);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.location-actions__btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-strong);
}

.location-actions__btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .location-map {
    height: 280px;
  }

  .location-actions__btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════
 *  PRECIO EN VARIAS MONEDAS
 *  ─────────────────────────────────────────────────────
 *  Las tres van en el HTML y acá se muestra sólo la activa. El atributo
 *  data-currency lo pone un script en el <head>, antes de pintar, así que
 *  el precio nunca aparece en la moneda equivocada ni parpadea.
 * ═══════════════════════════════════════════════════════ */

.price__value {
  display: none;
}

/* Por defecto, y también si el JavaScript está desactivado, se muestra la
   moneda en que se publicó la propiedad: es el monto real acordado. */
:root:not([data-currency]) .price[data-published="CLP"] .price__value[data-currency="CLP"],
:root:not([data-currency]) .price[data-published="UF"]  .price__value[data-currency="UF"],
:root:not([data-currency]) .price[data-published="USD"] .price__value[data-currency="USD"],
:root[data-currency="auto"] .price[data-published="CLP"] .price__value[data-currency="CLP"],
:root[data-currency="auto"] .price[data-published="UF"]  .price__value[data-currency="UF"],
:root[data-currency="auto"] .price[data-published="USD"] .price__value[data-currency="USD"] {
  display: inline;
}

/* Si el visitante eligió una moneda, esa manda en todo el sitio */
:root[data-currency="CLP"] .price__value[data-currency="CLP"],
:root[data-currency="UF"]  .price__value[data-currency="UF"],
:root[data-currency="USD"] .price__value[data-currency="USD"] {
  display: inline;
}

/* ── Interruptor de moneda ─────────────────────────── */
.currency-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px;
  border-radius: var(--radius-full);
  /* La pista sigue al tema. Antes era rgba(255,255,255,0.08), pensado para
     cuando esto vivia sobre un fondo oscuro: sobre la tarjeta blanca del modo
     claro, un 8% de blanco no se ve, y el selector parecia tres palabras
     sueltas sin ningun recuadro alrededor. */
  background: var(--surface-muted);
  border: 1px solid var(--border-color);
  margin-top: var(--space-3);
}

.currency-switch__btn {
  padding: var(--space-1) var(--space-4);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.currency-switch__btn:hover {
  color: var(--text-strong);
}

.currency-switch__btn[aria-pressed="true"] {
  /* El par --solid-* se invierte con el tema: pastilla oscura con texto claro
     en modo claro, y al reves en oscuro. Existe justamente para los controles
     que tienen que destacar sobre su propio fondo.
     Antes era var(--surface-card), que en modo claro es blanco: la pastilla
     del seleccionado quedaba blanca sobre la tarjeta blanca y no se distinguia
     cual de las tres monedas estaba activa. */
  background: var(--solid-bg);
  color: var(--solid-text);
}

.currency-switch__btn:focus-visible {
  outline: 2px solid var(--color-indigo-light);
  outline-offset: 2px;
}

.currency-switch__label {
  padding-left: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

/* En el catálogo va sobre fondo claro, no sobre el navy de la ficha */
/* Ya no cambia colores: los suyos eran los correctos y ahora son los del
   bloque de arriba, para los dos. Aca queda solo lo que de verdad distingue a
   esta variante, que es donde se apoya dentro de la barra del catalogo. */
.currency-switch--inline {
  margin-top: 0;
  margin-right: var(--space-4);
}

.prop-header__published {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--text-muted);
}

.prop-header__published strong {
  color: var(--text-body);
}

@media (max-width: 768px) {
  .currency-switch--inline {
    margin-right: 0;
    margin-bottom: var(--space-3);
  }

  .currency-switch__label {
    display: none;
  }
}

/* Texto del contrato: se lee dentro de un recuadro con scroll propio, para que
   un documento largo no empuje el botón de firmar fuera de la pantalla. */
.contrato-texto {
  max-height: 420px;
  overflow-y: auto;
  padding: var(--space-5);
  margin-top: var(--space-4);
  background: var(--surface-muted);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  font-family: var(--font-main);
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--text-strong);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.contrato-texto:focus-visible {
  outline: 2px solid var(--color-indigo);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════
   Ubicar la propiedad en el mapa (formulario del panel)
   ══════════════════════════════════════════════════ */

.geo {
  margin-top: var(--space-5);
}

.geo__acciones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

/* El estado ocupa el resto de la fila y se va abajo del botón en pantallas
   chicas: son frases largas ("Aproximada en Av. Apoquindo 4500, Las Condes…")
   y cortarlas con puntos suspensivos escondería justo lo que hay que revisar. */
.geo__estado {
  flex: 1 1 240px;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text-muted);
}

.geo__map {
  height: 340px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-muted);
}

@media (max-width: 640px) {
  .geo__map {
    height: 260px;
  }
}

/* ══════════════════════════════════════════════════
   Números de estacionamientos y bodegas
   ══════════════════════════════════════════════════ */

.unidades {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.unidades__grupo[hidden] {
  display: none;
}

/* Cajitas angostas en fila: son números de dos o tres caracteres, y en una
   columna a ancho completo se verían como campos importantes que no son. */
.unidades__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-2);
}

.unidades__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 108px;
}

.unidades__nombre {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.unidades__item .form-input {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

/* ══════════════════════════════════════════════════
   Meses de contribuciones
   ══════════════════════════════════════════════════ */

/* Doce casillas en una grilla que se acomoda sola: cuatro columnas en el
   escritorio (un trimestre por fila), dos en el celular. */
.meses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-1);
  margin-top: var(--space-2);
}

/* ── Etiquetas de estado de las consultas ─────────── */
/* `pub-tag--off` ya es la roja («pide atención») y `--ok` la verde. Faltaban
   la ámbar de «en curso» y la gris de «ya no pide nada». */

.pub-tag--wait {
  color: #92400e;
  background: #fef3c7;
}

.pub-tag--mute {
  color: var(--text-muted);
  background: var(--surface-muted);
}

/* El mensaje de la consulta dentro de la fila. Se corta a tres líneas: hay
   quien escribe un párrafo, y una sola consulta larga no puede empujar las
   otras veinte fuera de la pantalla. */
.pub-row__text {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════
   Formulario de consulta en la ficha pública
   ══════════════════════════════════════════════════ */

/* Va dentro de la tarjeta del ejecutivo, separado por una línea: es la
   alternativa a WhatsApp para quien prefiere dejar el dato y que lo llamen. */
.lead-form {
  padding: var(--space-5) var(--space-6) var(--space-6);
  border-top: 1px solid var(--border-soft);
}

.lead-form__form {
  margin-top: var(--space-4);
}

.lead-form__field {
  margin-bottom: var(--space-3);
}

.lead-form__field label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-strong);
}

.lead-form__opt {
  font-weight: 500;
  color: var(--text-muted);
}

.lead-form__field .form-input {
  width: 100%;
}

.lead-form__field textarea.form-input {
  resize: vertical;
  min-height: 88px;
}

/* El hueco del error se reserva vacío y sólo se pinta cuando hay texto: si
   apareciera de la nada, cada error empujaría los campos de abajo y la persona
   perdería de vista dónde estaba escribiendo. */
.lead-form__error {
  display: block;
  min-height: 16px;
  margin-top: 3px;
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--color-red);
}

.lead-form__field--bad .form-input {
  border-color: var(--color-red);
}

.lead-form__messages {
  margin-top: var(--space-3);
}

.lead-form__message {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.lead-form__message--success {
  color: #065f46;
  background: #d1fae5;
  border-color: #059669;
}

.lead-form__message--error {
  color: #991b1b;
  background: #fee2e2;
  border-color: var(--color-red);
}

.lead-form__legal {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}


/* ══════════════════════════════════════════════════════════
 *  DEFECTO G — Filtro del catálogo colapsable en móvil
 *  En escritorio el botón de toggle se oculta y el body se ve siempre.
 * ══════════════════════════════════════════════════════════ */

.catalog-filters__toggle {
  display: none;          /* oculto en escritorio */
}

@media (max-width: 768px) {
  .catalog-filters__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) var(--space-5);
    margin-bottom: var(--space-3);
    /* Tokens del tema, no la paleta clara fija: con slate-50/navy-800
       clavados el boton salia blanco brillante dentro de la tarjeta oscura,
       y era lo unico claro de toda la pantalla en tema oscuro. Estos tres
       son los mismos que usa el buscador de arriba, que es su vecino. */
    background: var(--surface-muted);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: 600;
    font-family: inherit;
    color: var(--text-strong);
    cursor: pointer;
    transition: all var(--t-fast);
  }

  .catalog-filters__toggle:hover {
    border-color: var(--color-indigo);
  }

  .catalog-filters__toggle svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .catalog-filters__toggle .filter-count {
    background: var(--color-indigo);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--radius-full);
    margin-left: var(--space-2);
  }

  /* El cuerpo de filtros (la fila de selects + inputs) empieza oculto */
  .catalog-filters__body {
    display: none;
  }

  .catalog-filters__body.open {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
}


/* ══════════════════════════════════════════════════════════
 *  DEFECTO C — Objetivos táctiles ≥ 44 × 44 px
 *
 *  Todo esto va dentro de la media query de teléfono a propósito.
 *  Suelto, como estaba, le subía el alto a cada enlace del footer, del
 *  header y a cada botón también en escritorio: la portada crecía 204px
 *  y la ficha 260px a 1024px, con los enlaces del footer pasando de 30
 *  a 44px de alto. La condición 1 del encargo es que el escritorio no
 *  se mueve, y el mínimo táctil es del dedo, no del mouse.
 * ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Footer links: de 30px a 44px de alto */
  .footer__link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Footer social icons: de 20×28 a 44×44 */
  .footer__social {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Header menu button: de 38×32 a 44×44 */
  .header__menu-btn {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  /* Header login: de 40 a 44px alto */
  .header__login,
  .header__cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Home favorite button: de 36×36 a 44×44 */
  .property-card__favorite {
    width: 44px;
    height: 44px;
  }

  /* Catalog favorite button: de 40×40 a 44×44 */
  .catalog-card__favorite {
    width: 44px;
    height: 44px;
  }

  /* Carousel arrows: no reducir en móvil, mantener 44×44 */
  .carousel__arrow {
    width: 44px;
    height: 44px;
  }

  /* Catalog selects: de 43 a 44px */
  .filter-select select {
    min-height: 44px;
  }

  /* Header logo */
  .header__logo {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Header links */
  .header__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Currency switch buttons */
  .currency-switch__btn {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
  }

  /* Property card & Catalog card title links */
  .property-card__title a,
  .catalog-card__title a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Breadcrumb links */
  .breadcrumb a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Buttons */
  .btn {
    min-height: 44px;
  }

  /* Footer contact links */
  .footer__contact-item a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* El «+ Ver todo» de la descripcion de la ficha medía 102x34: se quedó fuera
     de la pasada del Defecto C y era el único control propio que seguía bajo el
     mínimo. Los otros que marca el verificador en la ficha los dibuja el SDK de
     Google Maps y no se pueden tocar desde acá. */
  .prop-description__mas {
    min-height: 44px;
  }

  /* Auth views (login, registro, recuperar clave) */
  .auth-form__logo-mobile,
  .auth-link,
  .auth-switch__link,
  .auth-card__logo,
  .auth-link-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}


/* ══════════════════════════════════════════════════════════
 *  DEFECTO I — Contraste de texto en tema claro
 *
 *  Regla: 4,5:1 para texto normal, 3:1 para texto grande.
 *  Los colores de marca no se cambian; se ajusta el tono del
 *  texto o se oscurece el fondo del distintivo.
 * ══════════════════════════════════════════════════════════ */

/* ★ Destacada badge: 1.00:1 — blanco sobre blanco → texto oscuro sobre dorado */
.property-card__badge--featured,
.catalog-card__badge--featured {
  color: #451a03 !important;   /* marrón oscuro sobre gradiente dorado = ~7:1 */
}

/* Hero segment value (placeholder text): 2.56:1 → slate-600 para ≥ 4.5:1 */
.hero__segment-value {
  color: var(--color-slate-600);
}

.hero__segment-value.has-value {
  color: var(--color-navy-800);
  font-weight: 600;
}

/* Badge --emerald "Disponible": 2.54:1 blanco sobre #10b981 → fondo más oscuro */
.badge--emerald {
  background: #047857;         /* emerald-700: blanco = 4.6:1 */
  color: var(--color-white);
}

/* Catalog status badge "Disponible": misma corrección */
.catalog-card__status-badge--disponible {
  background: #047857;
}

/* WhatsApp button: 1.98:1 → fondo más oscuro */
.btn--whatsapp {
  background: #15803d;         /* green-700: blanco = 4.6:1 */
}

.btn--whatsapp:hover {
  background: #16a34a;         /* green-600 */
}

/* El footer dejo de ser navy fijo: `.footer` es var(--surface-muted) y sigue
   al tema. Un slate-400 calculado contra el navy viejo daba 2,34:1 sobre el
   slate-100 del tema claro. `.footer__copy` ya pide var(--text-muted) mas
   arriba, que es el token que si se invierte, asi que aca no va nada. */

/* Lo mismo con el conmutador de moneda: un navy-700 fijo daba 1,41:1 sobre
   la tarjeta del tema oscuro. Se queda con el var(--text-muted) de su regla
   original, que ya cumple en los dos temas. */

/* Section label (indigo-light = 4.47:1): subir a indigo sólido */
.section__label {
  color: var(--accent-label);
}

/* Property card badge "Parcela" — indigo sobre imagen: oscurecer el fondo */
.property-card__badge {
  background: #4338ca;         /* indigo-700: blanco = 5.4:1 */
}

/* Catalog card badge — misma corrección */
.catalog-card__badge {
  background: #4338ca;
}


/* ── Defecto I: Tarjeta de contacto (agent-card) ──────────
   Aca habia cuatro reglas con el texto en blanco fijo, escritas cuando
   `.agent-card` tenia el fondo navy-800 clavado. Ese fondo ya no existe:
   la tarjeta es var(--surface-card) y sigue al tema, que es como pedia
   resolverlo la tercera casilla del Defecto I. Con la tarjeta blanca en
   tema claro, el blanco fijo dejaba las etiquetas del formulario de
   consulta en 1,10:1 y el legal en 1,00:1 — el mismo defecto que venian
   a corregir, dado vuelta. Las reglas base de `.lead-form__*` usan
   --text-strong y --text-muted y cumplen en los dos temas. */


/* ══════════════════════════════════════════════════════════
 *  DISTINTIVOS DE LA PORTADA
 *
 *  La tarjeta del inicio traia un solo distintivo (destacada, o
 *  el estado, o el tipo). Ahora lleva la misma fila que la del
 *  catalogo: tipo, operacion y estado juntos. El que se posiciona
 *  pasa a ser el contenedor, asi que dentro de el los distintivos
 *  van en flujo normal.
 * ══════════════════════════════════════════════════════════ */

.property-card__overlay {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  right: 64px;                 /* deja libre el corazon de favoritos */
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  z-index: 2;
}

.property-card__overlay .property-card__badge {
  position: static;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Venta / arriendo: el mismo gris translucido del catalogo */
.property-card__badge--op {
  background: rgba(15, 23, 42, 0.72);
  color: var(--color-white);
  backdrop-filter: blur(4px);
}

.property-card__status-badge {
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  letter-spacing: 0.3px;
  color: var(--color-white);
}

.property-card__status-badge--disponible {
  background: #047857;         /* emerald-700: blanco = 4.6:1 */
}

.property-card__status-badge--vendida {
  background: var(--color-red);
}

.property-card__status-badge--arrendada {
  background: #b45309;
}


/* ══════════════════════════════════════════════════════════
 *  ORDENAR LAS FOTOS DE UNA PUBLICACION
 *
 *  La grilla del panel dejo de ser una vitrina: el ejecutivo
 *  arrastra las fotos ahi mismo y ese es el orden que sale en
 *  la ficha, asi que la tarjeta necesita decir que se puede
 *  agarrar y en que puesto va cada una.
 * ══════════════════════════════════════════════════════════ */

.photo[draggable="true"] {
  cursor: grab;
}

.photo--dragging {
  opacity: 0.4;
  cursor: grabbing;
}

/* El numero de puesto. Va al otro lado del distintivo de portada para que en
   la foto 1 se lean los dos. */
.photo__position {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  min-width: 24px;
  padding: 3px var(--space-2);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  color: var(--color-white);
  background: rgba(15, 23, 42, 0.72);
  border-radius: var(--radius-full);
}

/* Con las flechas delante ya son cuatro botones y en una tarjeta de 200 px no
   caben en una linea: sin el `wrap` la fila se desbordaba en vez de partirse. */
.photo__actions {
  flex-wrap: wrap;
}

/* Las flechas no se estiran: el ancho sobrante es para "Hacer portada" y
   "Eliminar", que llevan texto y bajan juntas a la segunda linea. */
.photo__actions .photo__move {
  flex: 0 0 auto;
}

/* 72 px de base para que "Hacer portada" y "Eliminar" quepan juntas en la
   segunda linea; con una base mas ancha cada una se llevaba una linea entera
   y la tarjeta crecia tres filas de botones. */
.photo__actions form:not(.photo__move) {
  flex: 1 1 72px;
  min-width: 0;
}

.photo__actions .photo__move .photo__btn {
  width: auto;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  line-height: 1;
}

.photo__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.photo__btn:disabled:hover {
  background: var(--surface-muted);
}


/* ══════════════════════════════════════════════════════════
 *  BUSCADOR DEL CATALOGO — SEGUNDA FILA
 *
 *  Antes los siete filtros iban en una sola fila. Ahora arriba
 *  quedan los tres de siempre y el resto vive en una fila que
 *  se despliega con el boton "Busqueda avanzada".
 * ══════════════════════════════════════════════════════════ */

/* Las dos filas son hermanas sueltas dentro del cuerpo, que no tenia reglas
   propias en escritorio: quedaban pegadas una a otra mientras que el buscador
   de arriba respiraba. El mismo `--space-5` que separa al buscador de la
   primera fila (y que el cuerpo ya usaba en el telefono) las separa a ellas. */
.catalog-filters__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* `.catalog-filters__row` pide `display: flex`, que le gana al `display: none`
   que el navegador le da a `[hidden]`. Sin esta regla la fila avanzada se ve
   siempre y el boton no hace nada visible. */
.catalog-filters__row[hidden] {
  display: none;
}

/* Secundario a proposito: el boton rojo de "Buscar" tiene que seguir siendo
   el que se ve primero. */
.catalog-filters__advanced {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-body);
  background: var(--surface-muted);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--t-fast);
}

.catalog-filters__advanced:hover {
  border-color: var(--color-indigo);
  color: var(--text-strong);
}

.catalog-filters__advanced:focus-visible {
  outline: none;
  border-color: var(--color-indigo);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.catalog-filters__advanced svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.catalog-filters__advanced-chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--t-fast);
}

.catalog-filters__advanced[aria-expanded="true"] {
  border-color: var(--color-indigo);
  color: var(--text-strong);
}

.catalog-filters__advanced[aria-expanded="true"] .catalog-filters__advanced-chevron {
  transform: rotate(180deg);
}

/* Cuantos filtros avanzados hay puestos. Con la fila cerrada es lo unico que
   avisa que el resultado viene recortado por algo que no se ve. */
.catalog-filters__advanced-count {
  min-width: 18px;
  padding: 1px 5px;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  color: var(--color-white);
  background: #4338ca;
  border-radius: var(--radius-full);
}

/* Los dos botones viajan juntos y pegados a la derecha. Sueltos en la fila,
   en los anchos donde no alcanzaba para todo, "Buscar" bajaba solo a una
   segunda linea y "Busqueda avanzada" se quedaba arriba. */
.catalog-filters__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  /* En la fila de arriba ya no hay lugar para los botones al lado de los tres
     desplegables al 50%: se llevan el ancho entero, uno sobre otro. */
  .catalog-filters__actions {
    width: 100%;
  }

  .catalog-filters__advanced {
    width: 100%;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════
   HERRAMIENTAS — pantalla propia y tarjetas de acceso
   ══════════════════════════════════════════════════ */

/* Cierre del bloque de servicios de la portada: las herramientas se mudaron a
   su propia pantalla y desde ahi se llega al resto. */
.services__mas {
  margin-top: var(--space-10);
  text-align: center;
}

/* Flex y no grid por lo mismo que .services__grid: con una fila incompleta las
   tarjetas quedan centradas bajo el titulo en vez de pegadas a la izquierda. */
.tools-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
}

.tools-grid > * {
  flex: 0 1 calc((100% - 2 * var(--space-6)) / 3);
  min-width: 0;
}

.tool-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  color: inherit;
  text-decoration: none;
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.tool-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: 0 12px 32px var(--shadow-card);
}

/* Icono y no fotografia: son herramientas, y no hay foto que represente un
   simulador de credito sin verse de banco de imagenes. */
.tool-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-5);
  color: var(--accent-label);
  background: var(--surface-muted);
  border-radius: var(--radius-lg);
}

.tool-card__icon svg {
  width: 26px;
  height: 26px;
}

.tool-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: var(--space-3);
}

/* Se estira para que el enlace del fondo quede a la misma altura en las tres
   tarjetas, aunque los textos midan distinto. */
.tool-card__text {
  flex: 1 1 auto;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: var(--space-6);
}

.tool-card__cta {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--accent-label);
}

.tool-card__cta::after {
  content: " \2192";
}

@media (max-width: 1024px) {
  .tools-grid > * {
    flex-basis: calc((100% - var(--space-6)) / 2);
  }
}

@media (max-width: 640px) {
  .tools-grid > * {
    flex-basis: 100%;
  }
}


/* ══════════════════════════════════════════════════
   SIMULADOR DE CREDITO — pantalla propia y encajado
   ══════════════════════════════════════════════════ */

.sim {
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}

/* Encajado en la ficha de una propiedad llega cerrado. El <details> se encarga
   solo; el padding se lo lleva el cuerpo para que la barra de apertura ocupe
   el ancho completo. */
.sim--plegable {
  padding: 0;
}

.sim__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  /* Saca el triangulito que dibuja el navegador. La flecha es el SVG del
     final, que si se puede girar al abrir. Hacen falta las dos reglas: una
     para Firefox y la otra para los WebKit. */
  list-style: none;
}

.sim__toggle::-webkit-details-marker {
  display: none;
}

.sim__toggle-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  color: var(--accent-label);
  background: var(--surface-muted);
  border-radius: var(--radius-md);
}

.sim__toggle-icono svg {
  width: 22px;
  height: 22px;
}

.sim__toggle-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sim__toggle-texto strong {
  font-size: var(--text-base);
  color: var(--text-strong);
}

.sim__toggle-texto span {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.sim__toggle-caret {
  width: 18px;
  height: 18px;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--text-subtle);
  transition: transform var(--t-fast);
}

.sim--plegable[open] .sim__toggle-caret {
  transform: rotate(180deg);
}

.sim__cuerpo {
  padding: var(--space-6);
  border-top: 1px solid var(--border-soft);
}

/* minmax(0, …) y no 1fr pelado: los hijos de un grid traen min-width auto, y
   el bloque del resultado, con sus numeros largos, estiraba la columna y
   sacaba la ficha entera de la pantalla en el telefono. */
.sim__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-8);
  align-items: start;
}

.sim__campos {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.sim__par {
  display: flex;
  gap: var(--space-2);
}

.sim__par > .form-input {
  flex: 1 1 auto;
  min-width: 0;
}

.sim__par > .form-select {
  flex: 0 0 6.5rem;
  width: 6.5rem;
}

.sim__sufijo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 var(--space-4);
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface-muted);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

/* El valor que no se puede editar, cuando el simulador va en una ficha: ahi el
   precio es un dato de la publicacion y no una suposicion del visitante. */
.sim__fijo {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-muted);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.sim__fijo-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-subtle);
}

.sim__fijo-valor {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--text-strong);
}

.sim__fijo-nota {
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--text-muted);
}

.sim__resultado {
  padding: var(--space-6);
  background: var(--surface-muted);
  border-radius: var(--radius-lg);
}

.sim__vacio {
  margin: 0;
  padding: var(--space-8) var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.7;
  text-align: center;
  color: var(--text-muted);
}

.sim__hero {
  padding-bottom: var(--space-5);
  text-align: center;
  border-bottom: 1px solid var(--border-color);
}

.sim__hero-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-subtle);
}

.sim__hero-valor {
  display: block;
  margin: var(--space-2) 0;
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-strong);
}

.sim__hero-uf {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.sim__filas {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
}

.sim__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
}

.sim__fila dt {
  min-width: 0;
  color: var(--text-muted);
}

.sim__fila dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
  color: var(--text-strong);
}

.sim__fila dd small {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
}

.sim__fila--separada {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-color);
}

.sim__fila--fuerte dt,
.sim__fila--fuerte dd {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-strong);
}

.sim__nota,
.sim__legal {
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--text-subtle);
}

.sim__nota {
  margin: var(--space-4) 0 0;
}

.sim__legal {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}

.sim__aviso {
  margin-top: var(--space-4);
}

.sim__pie-pagina {
  margin-top: var(--space-10);
  text-align: center;
}

.sim__pie-pagina p {
  max-width: 46rem;
  margin: 0 auto var(--space-5);
  color: var(--text-muted);
}

.sim__pie-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}

/* Area tactil de los controles del simulador.
   `.form-input` mide 43 px de alto en todo el sitio, un pixel bajo los 44x44
   que pide el verificador (WCAG 2.5.5). Se corrige aca dentro y no en la regla
   base a proposito: esa la usan todos los formularios del panel y del sitio, y
   subirle la altura movia maquetaciones que hoy estan bien. */
.sim .form-input,
.sim .form-select {
  min-height: 44px;
}

/* El enlace al simulador completo, cuando el bloque va en una ficha. Dentro de
   la frase medía 112x15; suelto y con alto minimo llega al tamano tactil sin
   que haya que estirar el texto de alrededor. */
.sim__fijo-enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent-label);
}

@media (max-width: 900px) {
  /* Los campos arriba y el resultado abajo. En dos columnas de 300 px los
     numeros del resultado dejaban de entrar en una linea. */
  .sim__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .sim {
    padding: var(--space-5);
  }

  .sim__toggle,
  .sim__cuerpo,
  .sim__resultado {
    padding: var(--space-4);
  }

  .sim__hero-valor {
    font-size: var(--text-2xl);
  }
}

/* ══════════════════════════════════════════════════
   ASISTENTE DE PUBLICACION — barra de pasos y revision (#73)
   ══════════════════════════════════════════════════ */

/* Los cuatro pasos en fila, unidos por una linea. El paso hecho lleva un visto,
   el actual va en indigo y los que vienen en gris. Son enlaces cuando la
   propiedad ya existe, para saltar a corregir una foto sin pasar por los datos. */
.pasos {
  display: flex;
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
  counter-reset: paso;
}

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

/* La linea entre un paso y el siguiente: sale de la mitad del circulo y llega
   hasta el borde del item, donde empieza la del vecino. */
.pasos__item + .pasos__item::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 50%;
  left: -50%;
  height: 2px;
  background: var(--border-color);
}

.pasos__item--hecho + .pasos__item::before,
.pasos__item--hecho + .pasos__item--hecho::before {
  background: var(--color-indigo);
}

.pasos__enlace {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;   /* objetivo tactil */
  color: var(--text-muted);
  text-decoration: none;
}

a.pasos__enlace:hover .pasos__nombre {
  color: var(--text-strong);
}

.pasos__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--text-muted);
  background: var(--surface-card);
  border: 2px solid var(--border-color);
  border-radius: 50%;
}

.pasos__numero svg {
  width: 16px;
  height: 16px;
}

.pasos__nombre {
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: center;
}

.pasos__item--hecho .pasos__numero {
  color: var(--color-white);
  background: var(--color-indigo);
  border-color: var(--color-indigo);
}

.pasos__item--actual .pasos__numero {
  color: var(--color-indigo);
  border-color: var(--color-indigo);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
}

.pasos__item--actual .pasos__nombre {
  color: var(--text-strong);
}

/* La revision: la publicacion como tarjeta, portada a la izquierda. */
.revision {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  margin-bottom: var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.revision__portada {
  min-height: 260px;
  background: var(--surface-muted);
}

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

.revision__sin-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 260px;
  font-weight: 700;
  color: var(--text-muted);
}

.revision__cuerpo {
  padding: var(--space-8);
}

.revision__precio {
  margin: 0 0 var(--space-1);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--text-strong);
}

.revision__titulo {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-strong);
}

.revision__meta {
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.revision__datos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.revision__datos dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.revision__datos dd {
  margin: 2px 0 0;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-strong);
}

.revision__descripcion {
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-body);
}

.revision__enlaces {
  margin: var(--space-5) 0 0;
  font-size: var(--text-sm);
  font-weight: 700;
}

.revision__enlaces a {
  color: var(--accent-label);
}

@media (max-width: 768px) {
  .revision {
    grid-template-columns: 1fr;
  }

  .revision__portada {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }

  .revision__cuerpo {
    padding: var(--space-5);
  }
}

@media (max-width: 480px) {
  /* En 360 px los cuatro nombres no caben en una fila: el numero queda y el
     nombre se muestra solo en el paso actual. */
  .pasos__item:not(.pasos__item--actual) .pasos__nombre {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}


/* ══════════════════════════════════════════════════
   TRABAJA CON NOSOTROS — la pagina de postulacion (#72)
   ══════════════════════════════════════════════════ */

/* Cabecera oscura fija, como la de la portada pero sin foto: texto blanco
   sobre navy en los dos temas, por la misma regla que el texto sobre
   fotografias. Deja hueco arriba para la barra, que es fixed. */
.sumate-hero {
  padding: 150px 0 var(--space-20);
  background: linear-gradient(135deg, var(--color-navy-900), var(--color-navy-800));
  color: var(--color-white);
}

.sumate-hero__inner {
  max-width: 46rem;
}

.sumate-hero__label {
  display: block;
  color: var(--color-indigo-light);
}

.sumate-hero__title {
  margin: 0 0 var(--space-5);
  font-size: var(--text-5xl);
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-white);
}

.sumate-hero__text {
  margin: 0 0 var(--space-8);
  font-size: var(--text-lg);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}

.sumate-hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* El «ghost» base es una superficie del tema; sobre el navy fijo del hero
   necesita el contorno blanco de «Iniciar sesion». */
.sumate-hero .btn--ghost {
  color: var(--color-white);
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}

.sumate-hero .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-white);
}

/* Los tres pasos, en fila y numerados. */
.sumate-pasos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sumate-pasos__item {
  flex: 0 1 calc((100% - 2 * var(--space-8)) / 3);
  min-width: 0;
  text-align: center;
}

.sumate-pasos__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-4);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-white);
  background: var(--color-indigo);
  border-radius: 50%;
}

.sumate-pasos__titulo {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-strong);
}

.sumate-pasos__texto {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-muted);
}

/* El formulario: la misma caja que el de contacto, centrada y mas angosta. */
.sumate-form {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--space-8);
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
}

.sumate-form .form-check span {
  font-size: var(--text-sm);
  color: var(--text-body);
}

@media (max-width: 1024px) {
  .sumate-pasos__item {
    flex-basis: 100%;
    max-width: 30rem;
  }
}

@media (max-width: 768px) {
  .sumate-hero {
    padding: 120px 0 var(--space-12);
  }

  .sumate-hero__title {
    font-size: var(--text-3xl);
  }
}

@media (max-width: 600px) {
  .sumate-form {
    padding: var(--space-5);
  }

  .sumate-form .form-row {
    grid-template-columns: 1fr;
  }
}