/* ==========================================================================
   HERMES HOME — Sistema visual
   Paleta: 60% blanco hueso · 30% azul · 10% champagne
   Tipografía: Playfair Display (titulares) + Inter (información comercial)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  /* Paleta de marca.
     Los tonos cálidos se reemplazaron por blanco hueso: mismo papel en el
     diseño, pero neutros. El azul y el champagne quedan como estaban. */
  --azul:        #10194F;
  --azul-hondo:  #091235;
  --azul-medio:  #34406F;
  --marfil:      #F7F7F5;   /* fondo general */
  --beige:       #DCDCD7;   /* superficies apagadas, números decorativos */
  --champagne:   #C9A96E;
  --champagne-b: #B8945A;
  --carbon:      #151827;
  --gris:        #666A78;
  --gris-claro:  #EAEAE6;
  --linea:       #E5E5E1;
  --blanco:      #FFFFFF;

  --ok:      #2E7D5B;
  --alerta:  #B3541E;
  --error:   #A32F2F;

  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --r:    3px;
  --r-lg: 6px;
  --sombra:    0 1px 2px rgba(9,18,53,.05), 0 1px 6px rgba(9,18,53,.04);
  --sombra-md: 0 3px 14px rgba(9,18,53,.08);
  --sombra-lg: 0 10px 36px rgba(9,18,53,.13);
  --nav-h: 66px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--marfil);
  color:var(--carbon);
  line-height:1.55;
  font-size:14.5px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}

h1,h2,h3,.serif{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;line-height:1.18}
h1{font-size:clamp(1.9rem,3.8vw,3rem)}
h2{font-size:clamp(1.4rem,2.4vw,2rem)}
h3{font-size:1.15rem}

/* --------------------------------------------------------------------------
   CIFRAS — precios, métricas y superficies.
   Van en sans con dígitos tabulares. Los de Playfair son de estilo antiguo:
   el 3, el 4 y el 7 cuelgan por debajo de la línea base y en una columna de
   precios quedan desparejos. Además el manual reserva la serif para los
   titulares y pide sans para "precios, ubicaciones y datos comerciales".
   -------------------------------------------------------------------------- */
.precio, .spec b, .kpi b, .cifra-panel b, .cifra-perfil,
.asesor-card-cifras div b, .rend-cifras div b,
.mini-body .p, .pop .p, .asesor-props li .p{
  font-family:var(--sans);
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
  font-weight:600;
  letter-spacing:-.015em;
}

/* --------------------------------------------------------------------------
   ICONOS — regla global. Todo SVG que sale de icono() escala con su texto.
   Sin esto los SVG sin width/height se estiran al tamaño del contenedor.
   -------------------------------------------------------------------------- */
.ic{width:1.05em;height:1.05em;flex-shrink:0;display:inline-block;vertical-align:-.15em}
.ic--lg{width:1.4em;height:1.4em}
.ic--xl{width:38px;height:38px}
svg:not([width]):not(.ic){width:1.05em;height:1.05em;flex-shrink:0}

.wrap{max-width:1280px;margin:0 auto;padding:0 22px}
.section{padding:56px 0}
.section--tight{padding:34px 0}
.eyebrow{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--champagne);font-weight:600;margin-bottom:10px;
}
.section-head{max-width:640px;margin-bottom:28px}
.section-head p{color:var(--gris);margin-top:9px;font-size:.95rem}
.rule{width:44px;height:2px;background:var(--champagne);margin:14px 0 0}

/* ============================== BOTONES ============================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 18px;border-radius:var(--r);
  font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  border:1px solid transparent;transition:all .16s ease;white-space:nowrap;line-height:1.2;
}
.btn--champagne{background:var(--champagne);color:var(--azul)}
.btn--champagne:hover{background:var(--champagne-b)}
.btn--azul{background:var(--azul);color:var(--blanco)}
.btn--azul:hover{background:var(--azul-hondo)}
.btn--linea{border-color:var(--champagne);color:var(--champagne);background:transparent}
.btn--linea:hover{background:var(--champagne);color:var(--azul)}
.btn--oscuro-linea{border-color:var(--azul);color:var(--azul);background:transparent}
.btn--oscuro-linea:hover{background:var(--azul);color:var(--blanco)}
.btn--sutil{background:var(--blanco);border-color:var(--linea);color:var(--carbon);
  text-transform:none;letter-spacing:0;font-weight:500}
.btn--sutil:hover{border-color:var(--azul)}
.btn--peligro{background:transparent;border-color:#E4C4C4;color:var(--error);
  text-transform:none;letter-spacing:0;font-weight:500}
.btn--peligro:hover{background:var(--error);color:var(--blanco);border-color:var(--error)}
/* Confirmación de una acción destructiva: el botón que la ejecuta va lleno */
.btn--peligro-solido{background:var(--error);color:var(--blanco)}
.btn--peligro-solido:hover{background:#8a2727}
.btn--wa{background:#25D366;color:#08351C}
.btn--wa:hover{background:#1FB856}
.btn--sm{padding:6px 12px;font-size:11px}
.btn--bloque{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ============================== NAVBAR ============================== */
.nav{
  background:var(--azul);color:var(--blanco);
  position:sticky;top:0;z-index:900;height:var(--nav-h);
  border-bottom:1px solid rgba(201,169,110,.2);
}
.nav-in{max-width:1280px;margin:0 auto;padding:0 22px;height:100%;
  display:flex;align-items:center;gap:22px}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
/* El monograma es algo más alto que ancho: fijamos la altura y dejamos
   que el ancho salga solo, para que no se deforme. */
.logo-marca{height:34px;width:auto;display:block}
.logo--pie .logo-marca{height:40px}
.logo-txt{line-height:1.05}
.logo-txt b{display:block;font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase}
.logo-txt span{display:block;font-size:8px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--champagne);margin-top:2px}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-links a{padding:8px 13px;font-size:12.5px;font-weight:500;
  color:rgba(255,255,255,.8);border-radius:var(--r);transition:.15s}
.nav-links a:hover{color:var(--blanco);background:rgba(255,255,255,.07)}
.nav-links a.on{color:var(--champagne)}
.nav-tools{display:flex;align-items:center;gap:9px;flex-shrink:0}

.nav-user{display:flex;align-items:center;gap:8px;padding-left:11px;
  border-left:1px solid rgba(255,255,255,.16)}
.avatar{
  width:31px;height:31px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:var(--champagne);color:var(--azul);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar--lg{width:56px;height:56px;font-size:17px}
.avatar--xl{width:88px;height:88px;font-size:26px}
.avatar--sm{width:24px;height:24px;font-size:9px}

/* Sin foto: silueta neutra en gris, nunca las iniciales del nombre.
   El SVG llega hasta el borde inferior y el círculo le recorta los hombros. */
.avatar--vacio{background:var(--gris-claro);color:#A7ABB6}
.avatar-silueta{width:100%;height:100%;display:block}
.nav-user-meta{line-height:1.2;max-width:130px}
.nav-user-meta b{display:block;font-size:12px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-user-meta span{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--champagne)}
.nav-burger{display:none}

/* ============================== HERO ============================== */
/* La foto va de fondo con el azul encima: si la imagen tarda o falla,
   el hero sigue legible porque el color ya está puesto debajo. */
.hero{background:var(--azul-hondo) center/cover no-repeat;color:var(--blanco);
  padding:70px 0 76px;position:relative;overflow:hidden}
.hero--foto::after{content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,
    rgba(9,18,53,.94) 0%, rgba(9,18,53,.86) 42%, rgba(9,18,53,.42) 100%)}
.hero::before{content:'';position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse 70% 90% at 84% 12%, rgba(201,169,110,.15), transparent 60%),
             radial-gradient(ellipse 60% 80% at 6% 92%, rgba(52,64,111,.5), transparent 58%)}
.hero-in{position:relative;z-index:2;max-width:760px}
/* Un titular, una voz: mismo peso y mismo color de punta a punta.
   La jerarquía la marca el filete champagne, no un cambio de letra. */
.hero h1{margin-bottom:0;color:var(--blanco);max-width:18ch;font-weight:500}
.hero-rule{display:block;width:56px;height:2px;background:var(--champagne);margin:22px 0 20px}
.hero p{font-size:1.02rem;color:rgba(247,247,245,.78);max-width:540px;margin-bottom:26px}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}

/* Buscador enriquecido, estilo portal inmobiliario */
.buscador{margin-top:34px;background:var(--blanco);border-radius:var(--r-lg);
  padding:7px;display:grid;grid-template-columns:1fr auto auto auto auto;gap:7px;
  box-shadow:var(--sombra-lg);max-width:980px}
/* El hero pinta todo de blanco; acá el fondo del buscador también es blanco,
   así que el texto tiene que volver al color de lectura o se vuelve invisible. */
.buscador input{border:none;outline:none;padding:11px 14px;font-size:14px;
  background:transparent;min-width:0;color:var(--carbon)}
.buscador input::placeholder{color:var(--gris);opacity:1}
.buscador select{border:none;outline:none;padding:11px 10px;font-size:13px;
  background:var(--marfil);border-radius:var(--r);color:var(--carbon);cursor:pointer}

/* ============================== CIFRAS ============================== */

/* ============================== TARJETAS DE INMUEBLE ============================== */
/* A 1280px entran 6 por fila: (1280 - 44 de padding - 5 huecos de 15) / 6 ≈ 193 px.
   Con auto-fill, en pantallas menores baja sola a 5, 4, 3… sin saltos raros. */
.grid-props{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:15px}
.card{background:var(--blanco);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sombra);border:1px solid var(--linea);
  transition:transform .18s ease, box-shadow .18s ease;
  display:flex;flex-direction:column;position:relative}
.card:hover{transform:translateY(-2px);box-shadow:var(--sombra-md)}
.card-img{height:132px;background:var(--gris-claro) center/cover no-repeat;
  position:relative;flex-shrink:0}
.card-img--vacia{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#1a2560 0%,var(--azul-hondo) 100%)}
.card-img--vacia .ic{width:34px;height:34px;color:rgba(201,169,110,.4)}
.chips{position:absolute;top:8px;left:8px;display:flex;gap:4px;flex-wrap:wrap}
.chip{padding:3px 7px;border-radius:2px;font-size:8px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase}
.chip--venta{background:var(--azul);color:var(--blanco)}
.chip--alquiler{background:var(--champagne);color:var(--azul)}
.chip--cat{background:rgba(255,255,255,.94);color:var(--carbon)}
.chip--estado{position:absolute;top:8px;right:8px;left:auto;
  background:var(--carbon);color:var(--blanco)}

.card-body{padding:12px 13px;flex:1;display:flex;flex-direction:column}
.precio{font-size:1.04rem;color:var(--azul);line-height:1.1;margin-bottom:2px}
.precio-alt{font-size:10.5px;color:var(--gris);margin-bottom:8px}
.card-body h3{font-size:.87rem;font-family:var(--sans);font-weight:600;
  margin-bottom:4px;color:var(--carbon);line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-dir{font-size:11px;color:var(--gris);display:flex;align-items:center;gap:4px;
  margin-bottom:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-dir .ic{color:var(--champagne)}
/* La ficha es lo primero que se aprieta al achicar: números cortos y sin envolver */
.ficha{display:flex;gap:9px;padding-top:9px;margin-top:auto;
  border-top:1px solid var(--linea);font-size:10.5px;color:var(--gris);flex-wrap:wrap}
.ficha span{display:flex;align-items:center;gap:3px;white-space:nowrap}
.ficha .ic{color:var(--azul-medio);width:12px;height:12px}

/* Asesor responsable en la tarjeta */
.card-asesor{display:flex;align-items:center;gap:6px;padding:8px 13px;
  border-top:1px solid var(--linea);background:var(--marfil);font-size:10.5px;color:var(--gris);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.card-asesor b{color:var(--carbon);font-weight:600}
.card-asesor .avatar--sm{width:20px;height:20px;font-size:8px}

.etiquetas{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.etiqueta{font-size:10.5px;padding:3px 9px;border-radius:2px;
  background:var(--marfil);color:var(--gris);border:1px solid var(--linea)}

/* ============================== FILTROS ============================== */
/* Accesos rápidos: operación y tipo en una sola tira. El visitante no piensa
   en dos campos separados, piensa "quiero alquilar" o "quiero un terreno". */
.rapidos{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.rapido{padding:7px 14px;border:1px solid var(--linea);border-radius:20px;
  background:var(--blanco);font-size:12.5px;color:var(--gris);transition:.15s}
.rapido:hover{border-color:var(--champagne);color:var(--carbon)}
.rapido.on{background:var(--azul);color:var(--blanco);border-color:var(--azul)}

.filtros{background:var(--blanco);border-radius:var(--r-lg);padding:16px;
  box-shadow:var(--sombra);border:1px solid var(--linea);margin-bottom:26px;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr auto;gap:11px;align-items:end}
.campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.campo label{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gris);font-weight:600}
.campo input,.campo select,.campo textarea{
  width:100%;padding:9px 11px;border:1px solid var(--linea);border-radius:var(--r);
  background:var(--blanco);font-size:13.5px;outline:none;
  transition:border-color .15s, box-shadow .15s}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--azul);box-shadow:0 0 0 3px rgba(16,25,79,.07)}
.campo input.malo,.campo select.malo{border-color:var(--error);box-shadow:0 0 0 3px rgba(163,47,47,.07)}
.campo textarea{resize:vertical;min-height:88px;font-family:var(--sans)}
.campo .pista{font-size:11px;color:var(--gris);line-height:1.4}
/* Moneda en la que filtra el campo, junto a su etiqueta */
.campo-moneda{color:var(--champagne);letter-spacing:.06em}
.campo .pista--error{color:var(--error)}
.campo-fila{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.campo-fila-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.campo-tel{display:grid;grid-template-columns:auto 1fr;gap:8px}
.campo-tel select{max-width:150px}

/* Accesos por categoría, estilo portal inmobiliario */
.categorias{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.cat-tile{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:19px 15px;text-align:center;transition:.16s;box-shadow:var(--sombra);display:block}
.cat-tile:hover{border-color:var(--champagne);transform:translateY(-2px);box-shadow:var(--sombra-md)}
.cat-tile .ic{width:25px;height:25px;color:var(--champagne);margin:0 auto 9px;display:block}
.cat-tile b{display:block;font-size:13px;font-weight:600;text-transform:capitalize;color:var(--carbon)}
.cat-tile span{display:block;font-size:11px;color:var(--gris);margin-top:2px}

/* Rangos de precio rápidos, estilo Remax */
.rangos{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px}
.rango{padding:6px 13px;border:1px solid var(--linea);border-radius:20px;
  background:var(--blanco);font-size:12px;color:var(--gris);transition:.15s}
.rango:hover{border-color:var(--champagne);color:var(--carbon)}
.rango.on{background:var(--azul);color:var(--blanco);border-color:var(--azul)}

/* ============================== DETALLE ============================== */
.detalle-hero{height:min(52vh,440px);background:var(--azul-hondo) center/cover no-repeat;
  position:relative;display:flex;align-items:flex-end}
.detalle-hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(9,18,53,.9) 0%,rgba(9,18,53,.15) 55%,transparent 100%)}
.detalle-hero .wrap{position:relative;z-index:1;padding-bottom:32px;width:100%}
.detalle-hero h1{color:var(--blanco);font-size:clamp(1.6rem,3.2vw,2.6rem);margin:12px 0 6px}
.detalle-hero .card-dir{color:rgba(247,247,245,.82);margin:0}
.detalle-cols{display:grid;grid-template-columns:1fr 356px;gap:38px;align-items:start}
.bloque{margin-bottom:36px}
.bloque h2{font-size:1.3rem;margin-bottom:5px}
.bloque > p{color:var(--gris);margin-top:13px;white-space:pre-line}
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1px;
  background:var(--linea);border:1px solid var(--linea);border-radius:var(--r-lg);
  overflow:hidden;margin-top:18px}
.spec{background:var(--blanco);padding:17px 14px;text-align:center}
.spec b{display:block;font-size:1.24rem;color:var(--azul);line-height:1.1}
.spec span{display:block;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gris);margin-top:5px}

.aside{position:sticky;top:calc(var(--nav-h) + 18px)}
.panel-precio{background:var(--blanco);border-radius:var(--r-lg);padding:24px;
  box-shadow:var(--sombra-md);border:1px solid var(--linea);border-top:3px solid var(--champagne)}
.panel-precio .precio{font-size:1.72rem;margin-bottom:2px}
.panel-precio .precio-alt{margin-bottom:18px}
.asesor{margin-top:20px;padding-top:20px;border-top:1px solid var(--linea);
  display:flex;align-items:center;gap:12px}
.asesor-info{min-width:0}
.asesor-info b{display:block;font-size:14px}
.asesor-info span{display:block;font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gris);margin-top:2px}
.asesor-info small{display:block;font-size:11.5px;color:var(--gris);margin-top:3px}

.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px;margin-top:16px}
.galeria img{height:100px;object-fit:cover;border-radius:var(--r);cursor:pointer;transition:opacity .15s}
.galeria img:hover{opacity:.82}

/* ============================== MAPAS ============================== */
.mapa{height:360px;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--linea);background:var(--gris-claro)}
.mapa--alto{height:calc(100vh - var(--nav-h) - 150px);min-height:460px}
.mapa--form{height:290px}
.mapa iframe{width:100%;height:100%;border:0;display:block}
.mapa-cols{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start}
.mapa-lista{max-height:calc(100vh - var(--nav-h) - 150px);min-height:460px;overflow-y:auto;
  display:flex;flex-direction:column;gap:8px;padding-right:5px}
.mini{background:var(--blanco);border-radius:var(--r);padding:11px;display:flex;gap:11px;
  cursor:pointer;border:1px solid var(--linea);transition:.15s;box-shadow:var(--sombra)}
.mini:hover,.mini.on{border-color:var(--champagne)}
.mini-img{width:66px;height:54px;border-radius:2px;flex-shrink:0;
  background:var(--azul-hondo) center/cover no-repeat}
.mini-body{min-width:0;flex:1}
.mini-body b{display:block;font-size:13px;line-height:1.3;margin-bottom:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-body small{display:block;font-size:11px;color:var(--gris)}
.mini-body .p{font-family:var(--serif);font-size:14.5px;color:var(--azul);margin-top:3px;font-weight:600}
.leaflet-popup-content-wrapper{border-radius:var(--r-lg)}
.leaflet-popup-content{margin:13px 15px;font-family:var(--sans)}
.pop b{display:block;font-size:13px;margin-bottom:2px}
.pop small{color:var(--gris);font-size:11px}
.pop .p{font-family:var(--serif);font-size:16px;color:var(--azul);margin:5px 0 8px;font-weight:600}

/* ============================== ACCESO ============================== */
.acceso{min-height:calc(100vh - var(--nav-h));display:grid;grid-template-columns:1fr 1fr}
.acceso-arte{background:var(--azul-hondo);color:var(--blanco);padding:56px 50px;
  display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.acceso-arte::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 70% at 78% 22%,rgba(201,169,110,.16),transparent 60%)}
.acceso-arte > *{position:relative}
.acceso-arte h2{margin:18px 0 14px}
.acceso-arte p{color:rgba(247,247,245,.74);max-width:390px}
.acceso-form{display:flex;align-items:center;justify-content:center;padding:48px 22px}
.acceso-caja{width:100%;max-width:400px}
.acceso-caja h2{font-size:1.7rem;margin-bottom:6px}
.acceso-caja > p{color:var(--gris);margin-bottom:26px;font-size:.95rem}
.tabs-acceso{display:flex;gap:24px;border-bottom:1px solid var(--linea);margin-bottom:24px}
.tabs-acceso button{padding:0 0 12px;font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris);border-bottom:2px solid transparent;
  margin-bottom:-1px;transition:.15s}
.tabs-acceso button.on{color:var(--azul);border-bottom-color:var(--champagne)}

/* ============================== PANEL ============================== */
.panel-head{background:var(--azul);color:var(--blanco);padding:30px 0 0}
.panel-head h1{font-size:1.7rem;margin-bottom:4px}
.panel-head p{color:rgba(247,247,245,.68);font-size:13.5px;margin-bottom:22px}
.tabs{display:flex;gap:2px;overflow-x:auto}
.tabs button{padding:12px 17px;font-size:11.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:rgba(255,255,255,.6);white-space:nowrap;
  border-bottom:2px solid transparent;transition:.15s}
.tabs button:hover{color:var(--blanco)}
.tabs button.on{color:var(--champagne);border-bottom-color:var(--champagne)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:30px}
.kpi{background:var(--blanco);border-radius:var(--r-lg);padding:18px 20px;
  box-shadow:var(--sombra);border:1px solid var(--linea);border-left:2px solid var(--champagne)}
.kpi b{display:block;font-size:1.52rem;color:var(--azul);line-height:1}
.kpi span{display:block;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gris);margin-top:7px}
.kpi small{display:block;font-size:11px;color:var(--gris);margin-top:5px}

/* Rendimiento de asesores */
/* ---- Tablero del panel: una tira de cifras, sin cajas sueltas ---- */
.panel-filtro{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.panel-filtro h3{font-size:1.35rem}
.tablero{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-lg);
  box-shadow:var(--sombra);overflow:hidden;margin-bottom:26px}
.cifra-panel{padding:20px 22px;border-right:1px solid var(--linea)}
.cifra-panel:last-child{border-right:none}
.cifra-panel b{display:block;font-size:1.48rem;color:var(--azul);line-height:1.05}
.cifra-panel span{display:block;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gris);margin-top:8px}
.cifra-panel small{display:block;font-size:11px;color:#93939c;margin-top:4px}

/* ---- Configuración: tres columnas que se apilan en pantallas chicas ---- */
.config-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:20px;align-items:start}

/* ---- Contacto directo en la ficha del inmueble ---- */
.contacto-directo{background:var(--blanco);border:1px solid var(--linea);
  border-left:2px solid var(--champagne);border-radius:var(--r-lg);padding:18px 20px;margin-top:20px}
.contacto-directo-btns{display:flex;gap:9px;flex-wrap:wrap}

/* ---- Galería y visor a pantalla completa ---- */
.galeria-item{display:block;padding:0;border:none;border-radius:var(--r);overflow:hidden;
  position:relative;cursor:zoom-in;background:var(--gris-claro);width:100%}
.galeria-item img,.galeria-item video{width:100%;height:130px;object-fit:cover;display:block;
  transition:transform .25s ease}
.galeria-item:hover img,.galeria-item:hover video{transform:scale(1.05)}
.galeria-play{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(9,18,53,.35);color:#fff;pointer-events:none}
.galeria-play .ic{width:30px;height:30px;fill:currentColor;stroke:none}

.overlay--visor{background:rgba(9,18,53,.94);backdrop-filter:blur(6px);padding:0}
.modal--visor{background:transparent;box-shadow:none;max-width:none;width:100%;height:100vh;
  max-height:100vh;border-radius:0}
.visor{position:relative;height:100vh;display:grid;
  grid-template-rows:1fr auto;align-items:center;padding:52px 16px 0}
.visor-escena{display:grid;place-items:center;min-height:0;height:100%;padding:0 8px}
.visor-escena img,.visor-escena video{max-width:100%;max-height:100%;object-fit:contain;
  border-radius:var(--r);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.visor-x{position:absolute;top:16px;right:18px;z-index:3;width:42px;height:42px;
  border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.1)}
.visor-x:hover{background:rgba(255,255,255,.22)}
.visor-x .ic{width:20px;height:20px}
.visor-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:rgba(255,255,255,.1);transition:background .16s}
.visor-nav:hover{background:rgba(255,255,255,.24)}
.visor-nav .ic{width:22px;height:22px}
.visor-nav--prev{left:16px;transform:translateY(-50%) rotate(180deg)}
.visor-nav--next{right:16px}
.visor-nav[hidden]{display:none}
.visor-pie{padding:16px 8px 20px;text-align:center}
.visor-pie > span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(247,247,245,.6);margin-bottom:12px}
.visor-tiras{display:flex;gap:7px;justify-content:flex-start;overflow-x:auto;
  padding:2px 4px 6px;scrollbar-width:thin}
.visor-tira{flex:0 0 auto;width:76px;height:54px;border-radius:3px;overflow:hidden;
  border:2px solid transparent;opacity:.5;transition:opacity .16s,border-color .16s;padding:0}
.visor-tira.on{opacity:1;border-color:var(--champagne)}
.visor-tira:hover{opacity:1}
.visor-tira img,.visor-tira video{width:100%;height:100%;object-fit:cover;display:block}

.pie-redes{display:flex;gap:9px;margin-top:13px}
.pie-redes a{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);color:rgba(247,247,245,.75);transition:.16s}
.pie-redes a:hover{border-color:var(--champagne);color:var(--champagne)}
.pie-redes .ic{width:15px;height:15px}

.pie-mapas{font-size:11px;opacity:.75}
.pie-mapas a{text-decoration:underline}

.rendimiento{background:var(--blanco);border-radius:var(--r-lg);border:1px solid var(--linea);
  box-shadow:var(--sombra);overflow:hidden;margin-bottom:18px}
.rend-head{padding:16px 20px;display:flex;align-items:center;gap:13px;
  border-bottom:1px solid var(--linea);flex-wrap:wrap}
.rend-cifras{margin-left:auto;display:flex;gap:26px;text-align:right;flex-wrap:wrap}
.rend-cifras div b{display:block;font-family:var(--serif);font-size:1.2rem;
  color:var(--azul);font-weight:600}
.rend-cifras div span{font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--gris)}
.cifra-perfil{font-size:1.1rem;color:var(--azul)}

/* Desglose de comisión al registrar una operación */
.desglose{margin-top:16px;border:1px solid var(--linea);border-radius:var(--r);
  background:var(--marfil);padding:4px 14px}
.desglose-fila{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 0;font-size:13px;border-bottom:1px solid var(--linea)}
.desglose-fila:last-child{border-bottom:none}
.desglose-fila span{color:var(--gris)}
.desglose-fila b{font-variant-numeric:tabular-nums lining-nums;font-weight:600}
.desglose-fila--resta b{color:var(--alerta)}
.desglose-fila--total b{font-size:1.05rem;color:var(--azul)}
.desglose-fila--total span{color:var(--carbon);font-weight:600}

/* Puesto en el ranking: contraste suficiente para leerse sobre blanco */
.rend-puesto{width:26px;height:26px;flex-shrink:0;border-radius:50%;
  display:grid;place-items:center;background:var(--marfil);border:1px solid var(--linea);
  font-size:.82rem;font-weight:700;color:var(--azul);
  font-variant-numeric:tabular-nums lining-nums}
.rendimiento:first-of-type .rend-puesto{background:var(--champagne);color:var(--azul);
  border-color:var(--champagne)}

.barra-prog{height:5px;background:var(--gris-claro);border-radius:3px;overflow:hidden;margin-top:9px}
.barra-prog i{display:block;height:100%;background:var(--champagne);border-radius:3px}

.asesor-card{background:var(--blanco);border-radius:var(--r-lg);box-shadow:var(--sombra);
  border:1px solid var(--linea);overflow:hidden;margin-bottom:15px}
.asesor-card-head{padding:16px 20px;display:flex;align-items:center;gap:13px;
  border-bottom:1px solid var(--linea);flex-wrap:wrap}
.asesor-card-cifras{margin-left:auto;display:flex;gap:26px;text-align:right}
.asesor-card-cifras div b{display:block;font-family:var(--serif);font-size:1.2rem;
  color:var(--azul);font-weight:600}
.asesor-card-cifras div span{font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--gris)}
.asesor-props{list-style:none}
.asesor-props li{padding:11px 20px;border-bottom:1px solid var(--marfil);
  display:flex;align-items:center;gap:12px;cursor:pointer;transition:.14s;font-size:13.5px}
.asesor-props li:last-child{border-bottom:none}
.asesor-props li:hover{background:var(--marfil)}
.asesor-props li .p{margin-left:auto;font-family:var(--serif);color:var(--azul);
  font-size:14px;font-weight:600}

.tabla{background:var(--blanco);border-radius:var(--r-lg);border:1px solid var(--linea);
  box-shadow:var(--sombra);overflow:hidden;overflow-x:auto}
.tabla table{width:100%;border-collapse:collapse;min-width:660px}
.tabla th{background:var(--marfil);text-align:left;padding:11px 16px;
  font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gris);border-bottom:1px solid var(--linea);white-space:nowrap}
.tabla td{padding:12px 16px;font-size:13.5px;border-bottom:1px solid var(--marfil);
  vertical-align:middle}
.tabla tr:last-child td{border-bottom:none}
.tabla tbody tr:hover{background:var(--marfil)}
.acciones{display:flex;gap:5px;justify-content:flex-end;flex-wrap:wrap}

.barra{display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin-bottom:18px;flex-wrap:wrap}
.barra p{font-size:13px;color:var(--gris)}
.barra h3{font-size:1.1rem}

.permisos{display:flex;flex-direction:column;gap:10px;padding:14px;
  border:1px solid var(--linea);border-radius:var(--r);background:var(--marfil)}
.permiso{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:13.5px}
.permiso input{margin-top:3px;accent-color:var(--azul);cursor:pointer;width:15px;height:15px;flex-shrink:0}
.permiso b{display:block;font-weight:600}
.permiso small{display:block;color:var(--gris);font-size:12px;line-height:1.4}

/* Subida de foto de perfil */
.foto-perfil{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.foto-perfil-acciones{display:flex;flex-direction:column;gap:6px}
.foto-perfil input[type=file]{display:none}
.foto-btn{padding:7px 13px;border:1px solid var(--linea);border-radius:var(--r);
  background:var(--blanco);font-size:12px;font-weight:500;cursor:pointer;transition:.15s}
.foto-btn:hover{border-color:var(--azul)}

/* ============================== MODAL ============================== */
.overlay{position:fixed;inset:0;background:rgba(9,18,53,.62);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:1000;padding:22px;
  animation:aparecer .15s ease}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
.modal{background:var(--blanco);border-radius:var(--r-lg);width:100%;max-width:580px;
  max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--sombra-lg)}
.modal--lg{max-width:860px}
.modal--sm{max-width:420px}
.modal-head{padding:19px 23px;border-bottom:1px solid var(--linea);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-shrink:0}
.modal-head h3{font-size:1.15rem}
.modal-x{width:31px;height:31px;border-radius:var(--r);display:grid;place-items:center;
  color:var(--gris);flex-shrink:0}
.modal-x:hover{background:var(--marfil);color:var(--carbon)}
.modal-body{padding:23px;overflow-y:auto;flex:1}
.modal-body .campo{margin-bottom:16px}
.modal-pie{padding:16px 23px;border-top:1px solid var(--linea);background:var(--marfil);
  display:flex;justify-content:flex-end;gap:9px;flex-shrink:0}

/* Puerta de acceso: pop-up cuando un visitante quiere contactar */
/* Diálogo de confirmación */
.confirmar{display:flex;gap:15px;align-items:flex-start}
.confirmar p{font-size:14px;line-height:1.55}
.confirmar-ic{width:42px;height:42px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;background:#EEF1F8;color:var(--azul)}
.confirmar-ic--peligro{background:#F9ECEC;color:var(--error)}
.confirmar-ic .ic{width:20px;height:20px}

.puerta{text-align:center;padding:34px 30px}
.puerta .ic--xl{color:var(--champagne);margin:0 auto 16px}
.puerta h3{font-size:1.35rem;margin-bottom:9px}
.puerta p{color:var(--gris);font-size:13.5px;margin-bottom:22px;max-width:330px;
  margin-left:auto;margin-right:auto}
.puerta .btn{margin-bottom:8px}

/* ============================== VARIOS ============================== */
/* Operación en el formulario: casillas y no un desplegable, porque un
   inmueble puede ofrecerse en venta y en alquiler al mismo tiempo. */
.ops-check{display:flex;gap:9px;flex-wrap:wrap}
.op-check{display:flex;align-items:center;gap:8px;padding:9px 14px;cursor:pointer;
  border:1px solid var(--linea);border-radius:var(--r);background:var(--blanco);
  font-size:13.5px;transition:.15s}
.op-check:hover{border-color:var(--champagne)}
.op-check:has(input:checked){border-color:var(--azul);background:rgba(16,25,79,.05)}
.op-check input{width:15px;height:15px;accent-color:var(--azul);cursor:pointer}

/* Alquiler mensual en la ficha, cuando el inmueble además se vende. */
.precio-renta{margin-top:14px;padding-top:14px;border-top:1px solid var(--linea)}

.tags-input{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border:1px solid var(--linea);
  border-radius:var(--r);background:var(--blanco);align-items:center;min-height:42px}
.tags-input:focus-within{border-color:var(--azul);box-shadow:0 0 0 3px rgba(16,25,79,.07)}
.tags-input input{flex:1;min-width:105px;border:none;outline:none;padding:3px;font-size:13.5px}
.tag-chip{display:inline-flex;align-items:center;gap:5px;background:var(--azul);
  color:var(--blanco);padding:4px 9px;border-radius:2px;font-size:11.5px}
.tag-chip button{color:rgba(255,255,255,.65);font-size:14px;line-height:1}
.tag-chip button:hover{color:var(--blanco)}

.vacio{text-align:center;padding:60px 22px;color:var(--gris)}
.vacio .ic{width:40px;height:40px;color:var(--beige);margin:0 auto 15px;display:block}
.vacio h3{color:var(--carbon);margin-bottom:6px;font-size:1.05rem}
.vacio p{font-size:13.5px}

.aviso{padding:13px 15px;border-radius:var(--r);font-size:13px;line-height:1.5;
  border-left:2px solid;margin-bottom:18px}
.aviso--info{background:#EEF1F8;border-color:var(--azul);color:var(--azul)}
.aviso--ok{background:#EAF4EF;border-color:var(--ok);color:#1d5540}
.aviso--error{background:#F9ECEC;border-color:var(--error);color:#7d2424}
.aviso--champagne{background:#FAF7F0;border-color:var(--champagne);color:#6d5322}

.toast{position:fixed;bottom:24px;right:24px;z-index:2000;max-width:330px;
  background:var(--azul);color:var(--blanco);padding:13px 18px;border-radius:var(--r);
  box-shadow:var(--sombra-lg);font-size:13.5px;border-left:2px solid var(--champagne);
  animation:subir .2s ease}
@keyframes subir{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}
.toast--ok{border-left-color:#4ADE80}
.toast--error{background:var(--error);border-left-color:#FCA5A5}

.cargando{display:grid;place-items:center;padding:64px;color:var(--gris)}
.spinner{width:24px;height:24px;border:2px solid var(--gris-claro);
  border-top-color:var(--champagne);border-radius:50%;animation:girar .7s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

.insignia{display:inline-block;padding:3px 8px;border-radius:2px;font-size:9px;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase}
/* Estado del inmueble en las tablas del panel */
.insignia--est-disponible{background:#E7F1EC;color:#1d5540}
.insignia--est-reservado{background:#FBF1E4;color:#7a5320}
.insignia--est-vendido{background:var(--azul);color:var(--blanco)}
.insignia--est-alquilado{background:var(--azul-medio);color:var(--blanco)}

.insignia--superadmin{background:var(--azul);color:var(--champagne)}
.insignia--admin{background:var(--azul-medio);color:var(--blanco)}
.insignia--staff{background:var(--champagne);color:var(--azul)}
.insignia--client{background:var(--gris-claro);color:var(--gris)}
.insignia--nuevo{background:var(--ok);color:#fff}
.insignia--contactado{background:var(--champagne);color:var(--azul)}
.insignia--cerrado{background:var(--gris-claro);color:var(--gris)}
.insignia--venta{background:var(--azul);color:var(--blanco)}
.insignia--alquiler{background:var(--champagne);color:var(--azul)}

/* ============================== PIE ============================== */
.pie{background:var(--azul-hondo);color:rgba(247,247,245,.6);padding:52px 0 0;font-size:13px}
.pie-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:34px;padding-bottom:40px}
.pie h4{color:var(--blanco);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  margin-bottom:15px;font-family:var(--sans);font-weight:700}
.pie ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.pie a:hover{color:var(--champagne)}
.pie .lema{font-family:var(--serif);font-size:1.1rem;color:var(--champagne);
  margin:15px 0 12px;line-height:1.3}
.pie-contacto{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.pie-contacto .ic{color:var(--champagne)}
.pie-base{border-top:1px solid rgba(255,255,255,.08);padding:18px 0;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  align-items:center;font-size:11.5px}

/* Marca de agua de Zephyr: presente pero discreta */
.zephyr{display:inline-flex;align-items:center;gap:7px;opacity:.4;
  transition:opacity .2s ease;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(247,247,245,.75)}
.zephyr:hover{opacity:.95}
.zephyr svg{width:15px;height:15px}

/* ============================== RESPONSIVE ============================== */
@media (max-width:1040px){
  .detalle-cols{grid-template-columns:1fr}
  .aside{position:static}
  .mapa-cols{grid-template-columns:1fr}
  .mapa-lista{max-height:320px;min-height:0;flex-direction:row;overflow-x:auto}
  .mapa-lista .mini{min-width:262px}
  .mapa--alto{height:440px;min-height:0}
  .filtros{grid-template-columns:1fr 1fr 1fr}
  .pie-grid{grid-template-columns:1fr 1fr}
  .buscador{grid-template-columns:1fr 1fr}
  #perfilCols{grid-template-columns:1fr !important}
}
@media (max-width:860px){
  .acceso{grid-template-columns:1fr}
  .acceso-arte{display:none}
}
@media (max-width:680px){
  .wrap{padding:0 16px}
  .section{padding:40px 0}
  .nav-links{display:none;position:absolute;top:var(--nav-h);left:0;right:0;
    background:var(--azul);flex-direction:column;align-items:stretch;
    padding:8px 16px 16px;gap:0;border-bottom:1px solid rgba(201,169,110,.2);
    box-shadow:var(--sombra-lg)}
  .nav-links.abierto{display:flex}
  .nav-links a{padding:12px 4px;font-size:14px}
  .nav-burger{display:grid;place-items:center;width:36px;height:36px;color:var(--blanco)}
  .nav-burger .ic{width:20px;height:20px}
  .nav-user-meta{display:none}
  .buscador{grid-template-columns:1fr}
  /* A una sola columna la tarjeta ocupa todo el ancho: la foto tiene que
     crecer con ella o queda una franja aplastada. */
  .grid-props{grid-template-columns:1fr;gap:14px}
  .card-img{height:200px}
  .card-body{padding:14px 15px}
  .precio{font-size:1.22rem}
  .card-body h3{font-size:.96rem}
  .card-dir,.ficha{font-size:12px}

  .filtros{grid-template-columns:1fr}
  .campo-fila,.campo-fila-3{grid-template-columns:1fr}
  .pie-grid{grid-template-columns:1fr;gap:26px}
  .asesor-card-cifras,.rend-cifras{margin-left:0;width:100%;justify-content:space-between;text-align:left}

  /* Los rangos de precio y los accesos rápidos en una tira que se desliza,
     en vez de ocupar cuatro renglones */
  .rangos,.rapidos{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rangos::-webkit-scrollbar,.rapidos::-webkit-scrollbar{display:none}
  .rango,.rapido{flex:0 0 auto}

  /* Hero: menos aire y titular que no se coma la pantalla */
  .hero{padding:44px 0 48px}
  .hero h1{max-width:none;font-size:clamp(1.65rem,7.5vw,2.1rem)}
  .hero p{font-size:.95rem;margin-bottom:22px}
  .hero-rule{margin:16px 0 14px}
  .hero-cta{gap:8px}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}

  /* Ficha de propiedad */
  .detalle-hero{height:auto;min-height:250px}
  .detalle-hero .wrap{padding-bottom:24px}
  .specs{grid-template-columns:1fr 1fr}
  .galeria{grid-template-columns:1fr 1fr;gap:8px}
  .galeria-item img,.galeria-item video{height:110px}
  .mapa{height:280px}
  .bloque{margin-bottom:28px}

  /* Objetivos táctiles cómodos en formularios y botones */
  .btn{padding:12px 18px}
  .btn--sm{padding:9px 13px}
  .campo input,.campo select,.campo textarea{padding:11px 12px;font-size:16px}
  .modal-body{padding:18px}
  .modal-head,.modal-pie{padding:16px 18px}
  .modal-pie .btn{flex:1}

  /* Panel: pestañas deslizables y tablero de a dos */
  .panel-head{padding-top:24px}
  .panel-head h1{font-size:1.4rem}
  .tabs{scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{padding:12px 14px}
  .barra{gap:10px}
  .barra .btn{width:100%}
  .config-cols{gap:16px}
  .tablero{grid-template-columns:1fr 1fr}
  .cifra-panel{border-bottom:1px solid var(--linea)}
  .cifra-panel:nth-child(2n){border-right:none}
  .panel-filtro .campo{margin-left:0 !important;max-width:none !important;width:100%}
  .visor{padding-top:60px}
  .visor-nav{width:40px;height:40px}
  .visor-nav--prev{left:8px}
  .visor-nav--next{right:8px}
  .contacto-directo-btns .btn{width:100%}
  .toast{left:16px;right:16px;bottom:16px;max-width:none}
  .pie-base{justify-content:center;text-align:center}
}