/*
  JMZ Inmobiliaria — Design System
  Fuente de verdad: rediseño/JMZ Inmobiliaria.dc.html (diseño aprobado en Claude Design)
  Este archivo es consumido por Astro (site/) y linkeado también desde las páginas PHP
  (backend/) para garantizar un único sistema visual entre ambos motores.
*/

/* Fuentes: cargadas via <link> en BaseLayout.astro (preconnect + stylesheet), no @import aquí por performance. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--cr);
  color: var(--ink);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
img { display: block; max-width: 100%; }
::selection { background: #a9854a; color: #fff; }
input::placeholder, textarea::placeholder { color: #b0a898; opacity: 1; }
a { color: inherit; }

:root {
  --ink: #1c1813;
  --ink2: #3b342a;
  --st: #837a6c;
  --st2: #a79d8c;
  --ln: #e3d9c9;
  --cr: #f6f1e8;
  --iv: #efe6d7;
  --pp: #fbf8f2;
  --ch: #a9854a;
  --ch2: #c4a76b;
  --chd: #8a6f3c;
  --dk: #1b1712;
  --dkk: #141109;
  --wa: #25623f;
  --wa-hover: #1e4e31;

  --container: 1280px;
  --gutter: clamp(18px, 5vw, 56px);
  --section-y: clamp(56px, 8vw, 110px);
  --section-y-sm: clamp(48px, 6vw, 84px);
  --radius: 4px;
  --radius-sm: 2px;
  --radius-lg: 6px;

  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
}

@keyframes jmzFadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes jmzPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 98, 63, .5); }
  60% { box-shadow: 0 0 0 18px rgba(37, 98, 63, 0); }
}
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1);
}
[data-reveal].revealed { opacity: 1; transform: translateY(0); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section-sm { padding-top: var(--section-y-sm); padding-bottom: var(--section-y-sm); }
.bg-cream { background: var(--cr); }
.bg-ivory { background: var(--iv); }
.bg-paper { background: var(--pp); }
.bg-dark { background: var(--dk); }
.bg-darkest { background: var(--dkk); }
.bg-sand { background: #f6eedf; }
.border-top { border-top: 1px solid var(--ln); }
.border-bottom { border-bottom: 1px solid var(--ln); }

/* ---------- Texture / dark section backdrops ---------- */
/* Overlay oscuro removido a pedido: las secciones muestran su color de fondo tal cual,
   sin capa semitransparente encima. Se mantiene el selector solo por si algún bloque
   define su propio "background" inline (ver Home · sección Proceso). */
.texture-diagonal {
  position: absolute; inset: 0;
  pointer-events: none;
}
.glow-hero {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 95% 70% at 70% 0%, rgba(169,133,74,.28) 0%, transparent 62%),
    radial-gradient(ellipse 55% 50% at -5% 100%, rgba(120,88,38,.16) 0%, transparent 55%);
  pointer-events: none;
}

/* ---------- Typography ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-body);
  font-size: .72rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--chd);
}
.eyebrow--on-dark { color: var(--ch2); }
.eyebrow__rule { width: 28px; height: 1px; background: var(--ch); display: block; }

/* Encabezado centrado reutilizado en varias secciones (Home y Nosotros). Vivía solo en el
   <style> con scope de index.astro, así que en Nosotros no tenía NINGÚN margen aplicado —
   por eso el título quedaba pegado a las tarjetas de abajo. */
.section-heading { text-align: center; max-width: 46ch; margin: 0 auto clamp(48px, 6vw, 72px); }
.section-heading .eyebrow { justify-content: center; margin-bottom: 14px; }

h1.display, .h1-display {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.05; letter-spacing: -.015em;
  margin: 0;
}
h2.display, .h2-display {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.9rem, 3.8vw, 3.1rem); line-height: 1.08; letter-spacing: -.01em;
  margin: 0;
}
h3.display, .h3-display {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.3rem; line-height: 1.18; margin: 0;
}
.lede { font-size: 1.05rem; line-height: 1.75; color: var(--ink2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--font-body); font-size: .96rem; font-weight: 600;
  padding: 1.05em 1.9em; border-radius: var(--radius-sm);
  border: none; cursor: pointer; text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .15s ease;
  white-space: nowrap;
}
.btn-ink { background: var(--ink); color: var(--cr); }
.btn-ink:hover { transform: translateY(-1px); }
.btn-champagne { background: var(--ch); color: #fff; }
.btn-champagne:hover { background: var(--chd); transform: translateY(-2px); }
.btn-outline-dark { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-outline-light { background: transparent; color: #f4ede0; border: 1px solid rgba(255,255,255,.35); }
.btn-outline-light:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.65); }
.btn-champagne-outline { background: transparent; color: var(--chd); border: 1px solid var(--ch); }
.btn-whatsapp { background: var(--wa); color: #fff; }
.btn-whatsapp:hover { background: var(--wa-hover); }
.btn-sm { font-size: .84rem; padding: .85em 1em; }
.btn-block { width: 100%; }
.link-underline {
  background: none; border: none; cursor: pointer;
  border-bottom: 1px solid var(--ink); font-family: var(--font-body);
  font-size: .92rem; font-weight: 600; color: var(--ink); padding: 0 0 4px;
}

/* ---------- Chips / badges ---------- */
.chip {
  font-family: var(--font-body); font-size: .82rem; font-weight: 500;
  padding: .55em 1em; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink2); border: 1px solid var(--ln);
  cursor: pointer; white-space: nowrap;
}
.chip.is-active { background: var(--ch); color: #fff; border-color: var(--ch); font-weight: 600; }
.spec-tag {
  font-size: .74rem; color: var(--ink2); background: var(--iv);
  border: 1px solid var(--ln); padding: .34em .6em; border-radius: var(--radius-sm);
}
.badge-op {
  background: var(--ink); color: var(--cr); font-size: .66rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; padding: .4em .7em; border-radius: var(--radius-sm);
}
.badge-estado {
  background: rgba(251,248,242,.92); color: var(--chd); font-size: .66rem; font-weight: 600;
  padding: .4em .7em; border-radius: var(--radius-sm);
}

/* ---------- Cards ---------- */
.card {
  background: var(--pp); border: 1px solid var(--ln); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 24px 52px -14px rgba(28,24,19,.2); }
.card-reason {
  padding: 24px; background: var(--pp); border: 1px solid var(--ln); border-radius: var(--radius);
  transition: transform .22s ease, box-shadow .22s ease;
}
.card-reason:hover { transform: translateY(-4px); box-shadow: 0 18px 44px -12px rgba(28,24,19,.16); }
.rule-champagne { width: 30px; height: 1px; background: var(--ch); margin-bottom: 18px; }

.card-photo-placeholder {
  position: relative; border: none; cursor: pointer; padding: 0;
  aspect-ratio: 4/3; width: 100%;
  background: repeating-linear-gradient(135deg,#ece1d0 0 16px,#e5d9c6 16px 32px);
  display: flex; align-items: flex-end;
}

/* Card body — compartido entre PropertyCard.astro (Astro) y property-card.php (backend) */
.card__badge-op { position: absolute; top: 12px; left: 12px; }
.card__badge-estado { position: absolute; top: 12px; right: 12px; }
.card__ph {
  margin: 12px; font-family: ui-monospace, monospace; font-size: .62rem; color: var(--ink2);
  background: rgba(251,248,242,.85); padding: .4em .6em; border-radius: var(--radius-sm);
}
.card__body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.card__meta { font-size: .74rem; font-weight: 600; color: var(--st); text-transform: uppercase; margin-bottom: 8px; }
.card__title { margin-bottom: 10px !important; }
.card__price { font-size: 1.18rem; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.card__specs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.card__actions { display: flex; gap: 8px; margin-top: auto; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: .78rem; font-weight: 600; color: var(--ink2); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: .95rem; color: var(--ink);
  background: var(--cr); border: 1px solid var(--ln); border-radius: 3px; padding: .85em 1em;
}
.field textarea { resize: vertical; }
.form-panel {
  background: var(--pp); border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 16px;
}

/* ---------- Grids ---------- */
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: clamp(18px, 2.4vw, 28px); }

/* ---------- WhatsApp FAB ---------- */
.wa-fab {
  position: fixed; bottom: 22px; right: 22px; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--wa); color: #fff; text-decoration: none;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.45);
  animation: jmzPulse 2.6s ease-in-out infinite;
}
.wa-fab:hover { background: var(--wa-hover); }

@media (max-width: 640px) {
  .wa-fab { width: 52px; height: 52px; bottom: 16px; right: 16px; }
}