/* ============================================================================
   HALLAZGO — Sistema de diseño compartido (landing · app · backoffice · manual)
   Regla PERMANENTE: márgenes de seguridad SIEMPRE. Ningún contenido, popup o
   modal toca el borde de la pantalla. Todo 100% responsive y mobile-first.
   ============================================================================ */

:root {
  /* Marca */
  --brand:        #0E7C5B;  /* Verde Hallazgo (esmeralda) — primario */
  --brand-dark:   #0A5C44;
  --brand-600:    #0C6B4E;
  --brand-soft:   #E3F2EC;  /* fondo verde suave */
  --brand-tint:   #F1F8F5;
  --accent:       #E8A13C;  /* Ámbar — "el hallazgo", destaque cálido */
  --accent-dark:  #C9832A;
  --accent-soft:  #FBF0DD;
  --wa:           #25D366;  /* WhatsApp (funcional) */

  /* Gradiente isotipo / firma de marca */
  --grad-brand: linear-gradient(135deg, #12A472 0%, #0E7C5B 55%, #0A5C44 100%);
  --grad-accent: linear-gradient(135deg, #F2B75A 0%, #E8A13C 100%);

  /* Neutrales (tinta verdosa) */
  --ink:     #14201B;
  --ink-2:   #2C3A34;
  --muted:   #5C6B64;
  --muted-2: #8A968F;
  --line:    #E2E8E5;
  --line-2:  #EDF1EF;
  --bg:      #F5F7F6;
  --card:    #FFFFFF;

  /* Semánticos */
  --danger:  #C0442C;
  --danger-soft: #FBE9E5;
  --ok:      #2EA36B;
  --warn:    #E8A13C;

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

  /* Radios */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(20, 32, 27, 0.06);
  --shadow: 0 1px 3px rgba(20, 32, 27, 0.07), 0 6px 20px rgba(20, 32, 27, 0.06);
  --shadow-lg: 0 10px 40px rgba(20, 32, 27, 0.12);

  /* Márgenes de seguridad (la "demasía" — SIEMPRE presente) */
  --gutter: clamp(16px, 4vw, 28px);           /* margen lateral del contenido */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --maxw: 1120px;
}

/* ---------- reset mínimo ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  /* nunca scroll horizontal, y respeto de notch en todos los bordes */
  overflow-x: hidden;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}
img, svg, video { max-width: 100%; display: block; }
button, input, textarea, select { font-family: inherit; font-size: 100%; color: var(--ink); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- contenedor con margen de seguridad ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: 780px; }
.container-wide { max-width: 1280px; }

/* ---------- tipografía ---------- */
.display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); font-weight: 700; }
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 12.5px;
  font-weight: 700; color: var(--brand); display: inline-flex; align-items: center; gap: 8px;
}
.lead { font-size: clamp(1.05rem, 2vw, 1.28rem); color: var(--muted); }
.muted { color: var(--muted); }

/* ---------- marca / logo ---------- */
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; }
.brand-lockup .iso { width: 32px; height: 32px; flex: none; }
.brand-lockup .word {
  font-family: var(--font-display); font-weight: 800; font-size: 21px;
  color: var(--ink); letter-spacing: -0.03em;
}
.brand-lockup .word b { color: var(--brand); font-weight: 800; }

/* ---------- botones ---------- */
.btn {
  --btn-bg: var(--card); --btn-fg: var(--ink); --btn-bd: var(--line);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd); border-radius: var(--r);
  padding: 11px 18px; font-weight: 600; font-size: 15px; cursor: pointer;
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s, background .18s, border-color .18s;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn-primary { --btn-bg: var(--brand); --btn-fg: #fff; --btn-bd: var(--brand); }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-accent { --btn-bg: var(--accent); --btn-fg: #3d2a08; --btn-bd: var(--accent); }
.btn-ghost { --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--muted); }
.btn-ghost:hover { box-shadow: none; color: var(--ink); }
.btn-wa { --btn-bg: var(--wa); --btn-fg: #fff; --btn-bd: var(--wa); }
.btn-lg { padding: 14px 26px; font-size: 16.5px; border-radius: var(--r-lg); }
.btn-sm { padding: 7px 13px; font-size: 13.5px; border-radius: var(--r-sm); }
.btn:disabled, .btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- cards ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.card-pad { padding: clamp(18px, 3vw, 28px); }

/* ---------- pills / badges ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill);
  padding: 5px 13px; font-size: 13px; font-weight: 600;
  background: var(--brand-soft); color: var(--brand-dark);
}
.badge { border-radius: var(--r-sm); padding: 2px 9px; font-size: 11.5px; font-weight: 700; }
.badge-alquiler { background: var(--brand-soft); color: var(--brand-dark); }
.badge-venta { background: var(--accent-soft); color: var(--accent-dark); }
.badge-nueva { background: var(--accent); color: #3d2a08; }

/* ---------- modal / popup con margen de seguridad OBLIGATORIO ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20, 32, 27, .48);
  display: flex; align-items: center; justify-content: center;
  /* la demasía: el popup NUNCA toca el borde, ni con notch */
  padding: calc(20px + var(--safe-top)) calc(20px + var(--safe-right))
           calc(20px + var(--safe-bottom)) calc(20px + var(--safe-left));
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.modal {
  background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 560px;
  max-height: calc(100dvh - 40px - var(--safe-top) - var(--safe-bottom));
  overflow: auto; padding: clamp(18px, 4vw, 28px);
}

/* ---------- barra fija inferior (respeta el notch) ---------- */
.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--card); border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(20,32,27,.08);
  padding: 12px var(--gutter) calc(12px + var(--safe-bottom));
}

/* ---------- empty state ---------- */
.empty { text-align: center; padding: clamp(28px, 6vw, 56px) var(--gutter); color: var(--muted); }
.empty .empty-emoji { font-size: 40px; margin-bottom: 10px; }
.empty h3 { color: var(--ink); margin-bottom: 6px; }

/* ---------- grid elástico ---------- */
.eg { display: grid; gap: clamp(14px, 2.5vw, 20px); }
.eg-auto { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.eg-2 { grid-template-columns: repeat(2, 1fr); }
.eg-3 { grid-template-columns: repeat(3, 1fr); }
.eg-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .eg-4 { grid-template-columns: repeat(2, 1fr); } .eg-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .eg-2, .eg-3, .eg-4 { grid-template-columns: 1fr; } }

/* ---------- utilidades ---------- */
.tabular { font-variant-numeric: tabular-nums; }
.hstack { display: flex; align-items: center; gap: 10px; }
.vstack { display: flex; flex-direction: column; gap: 10px; }
.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.text-center { text-align: center; }
.hide-mobile { }
@media (max-width: 640px) { .hide-mobile { display: none !important; } }

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