/* =============================================================================
 * inmo.css — páginas de "inmobiliarias en [ciudad]".
 *
 * Estas páginas no caben en la columna de 760 px del resto de landings: llevan
 * fichas con logo, tabla comparativa y una banda de cierre, y necesitan el
 * mismo ancho y el mismo lenguaje visual que la portada (héroe con degradado,
 * antetítulos, tarjetas blancas sobre papel). Reutiliza los tokens y la barra
 * y el pie de landing.css; solo añade lo que aquí es distinto.
 * ========================================================================== */

.inm-wrap{ max-width:1240px; margin:0 auto; padding:0 clamp(16px,4vw,36px) }
/* la barra y el pie se ensanchan a juego con el contenido */
body.inm-body .lp-nav__in,
body.inm-body .lp-foot__in{ max-width:1240px }
body.inm-body{ background:var(--bg-2) }
main.inm{ padding-bottom:clamp(48px,7vw,86px) }

/* ── héroe con el degradado de marca, como la portada ───────────────────── */
.inm-hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(26px,4vw,54px) 0 clamp(30px,5vw,60px);
  background:linear-gradient(135deg,#3BAED6 0%,#1B7FA8 54%,#0B5C7A 100%);
  color:#fff;
}
.inm-hero::before{
  content:""; position:absolute; inset:-25%; z-index:-1;
  background:
    radial-gradient(circle at 12% 22%, #5FC8EE 0%, transparent 46%),
    radial-gradient(circle at 82% 14%, #93CFE8 0%, transparent 42%),
    radial-gradient(circle at 70% 86%, #4E9FD4 0%, transparent 48%);
  animation:inm-breathe 21s cubic-bezier(.4,0,.2,1) infinite; will-change:transform;
}
@keyframes inm-breathe{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2%,-1.5%,0) scale(1.07)}
}
.inm-hero .lp-bc{ margin:0 0 clamp(16px,3vw,26px) }
.inm-hero .lp-bc ol{ color:rgba(255,255,255,.72) }
.inm-hero .lp-bc a{ color:rgba(255,255,255,.9) }
.inm-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.92); color:var(--accent);
  border-radius:999px; padding:8px 15px; font-size:13px; font-weight:650;
  letter-spacing:.02em;
}
.inm-hero h1{
  font-family:var(--font-display); font-weight:700; color:#fff;
  font-size:clamp(2.1rem,5.4vw,4rem); line-height:1.04; letter-spacing:-.035em;
  margin:clamp(14px,2.4vw,22px) 0 0; max-width:19ch;
}
.inm-lede{
  margin:clamp(14px,2vw,20px) 0 0; max-width:62ch;
  font-size:clamp(1rem,1.35vw,1.2rem); line-height:1.55; color:rgba(255,255,255,.92);
}
.inm-hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:clamp(20px,3vw,30px) }
.inm-btn{
  /* min-height y no height: en móvil el rótulo largo pasa a dos líneas y con
     altura fija se salía de la píldora */
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  gap:.5em; min-height:54px; padding:14px 26px; line-height:1.3;
  border-radius:12px; background:#fff; color:var(--accent);
  font-weight:700; font-size:15.5px; text-decoration:none;
  box-shadow:0 14px 34px -16px rgba(4,33,44,.65);
  transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.inm-btn:hover{ transform:translateY(-1px); box-shadow:0 20px 44px -16px rgba(4,33,44,.75) }
.inm-hero__fine{ font-size:13.5px; color:rgba(255,255,255,.8); margin:0 }

/* cifras del héroe */
.inm-stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
  margin-top:clamp(24px,4vw,40px);
}
.inm-stat{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); border-radius:14px; padding:14px 16px; backdrop-filter:blur(6px) }
.inm-stat b{ display:block; font-family:var(--font-display); font-size:clamp(1.4rem,2.6vw,2rem); font-weight:700; letter-spacing:-.03em; line-height:1.1 }
.inm-stat span{ display:block; font-size:13px; color:rgba(255,255,255,.85); margin-top:3px }
@media (max-width:640px){ .inm-stats{ grid-template-columns:1fr; } }

/* ── secciones ──────────────────────────────────────────────────────────── */
.inm-sec{ margin-top:clamp(44px,6.5vw,86px) }
.inm-sec__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.inm-sec__eyebrow::before{ content:""; width:22px; height:2px; background:currentColor; border-radius:2px }
.inm-sec h2{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.032em;
  font-size:clamp(1.7rem,3.4vw,2.6rem); line-height:1.1; margin:.35em 0 .45em; max-width:22ch;
}
.inm-sec > p, .inm-sec > ul{ max-width:72ch; line-height:1.62 }
.inm-muted{ color:var(--muted); font-size:.94rem }

/* aviso de transparencia */
.inm-aviso{
  margin-top:clamp(30px,4vw,50px);
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start;
  background:#fff; border:1px solid var(--accent);
  border-left:5px solid var(--accent);
  border-radius:16px; padding:clamp(16px,2.4vw,24px);
  box-shadow:var(--shadow-card);
}
.inm-aviso svg{ color:var(--accent); flex:0 0 auto }
.inm-aviso p{ margin:0; line-height:1.6 }
.inm-aviso strong{ color:var(--accent) }

/* criterios en tarjetas numeradas, como los 3 pasos de la portada */
.inm-crit{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-top:6px }
.inm-crit li{ list-style:none; background:#fff; border:1px solid var(--line-2); border-radius:16px; padding:18px 20px }
.inm-crit b{ display:block; margin-bottom:5px }
.inm-crit span{ color:var(--muted); font-size:.93rem; line-height:1.5 }
.inm-crit__n{
  display:inline-grid; place-items:center; width:34px; height:34px; margin-bottom:12px;
  border-radius:10px; background:var(--accent-weak); color:var(--accent);
  font-weight:700; font-size:13px;
}

/* ── fichas de agencia ──────────────────────────────────────────────────── */
.inm-lista{ display:grid; gap:16px; margin-top:8px }
.inm-card{
  display:grid; grid-template-columns:210px minmax(0,1fr); gap:clamp(16px,2.4vw,30px);
  background:#fff; border:1px solid var(--line-2); border-radius:20px;
  padding:clamp(18px,2.4vw,26px); box-shadow:var(--shadow-sm);
  transition:box-shadow .25s var(--ease-out), transform .25s var(--ease-out), border-color .25s;
}
.inm-card:hover{ box-shadow:var(--shadow-card); transform:translateY(-2px); border-color:var(--line) }
.inm-card--destacada{ border-color:var(--accent); box-shadow:0 18px 46px -26px rgba(11,92,122,.6) }
@media (max-width:720px){ .inm-card{ grid-template-columns:1fr } }

.inm-logo{
  display:grid; place-items:center; height:118px; border-radius:14px;
  background:var(--surface-2); padding:18px; border:1px solid var(--line-2);
}
.inm-logo img{ max-width:100%; max-height:78px; object-fit:contain; display:block }
/* logo pensado para fondo oscuro: se le da el fondo que necesita */
.inm-logo--oscuro{ background:#0F2A33; border-color:#0F2A33 }

.inm-card__pos{ font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent) }
.inm-card--destacada .inm-card__pos{
  display:inline-block; background:var(--accent); color:#fff;
  padding:5px 11px; border-radius:999px; letter-spacing:.08em;
}
.inm-card h3{ font-family:var(--font-display); font-size:clamp(1.25rem,2vw,1.6rem); font-weight:700; letter-spacing:-.025em; margin:.35em 0 .15em }
.inm-card__meta{ color:var(--muted); font-size:.9rem; margin:0 0 .7em }
.inm-card__meta a{ color:var(--accent); font-weight:600 }
.inm-card p{ line-height:1.6; margin:0 0 .6em }
.inm-card ul{ margin:.2rem 0 0; padding-left:1.1rem; color:var(--ink-2) }
.inm-card li{ margin:.2rem 0 }
.inm-card__link{ display:inline-flex; align-items:center; gap:.35em; font-weight:650; color:var(--accent); text-decoration:none; margin-top:.5em }
.inm-card__link:hover{ text-decoration:underline }

/* ── tabla comparativa ──────────────────────────────────────────────────── */
.inm-tablawrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line-2); border-radius:16px; background:#fff }
.inm-tabla{ width:100%; border-collapse:collapse; min-width:660px; font-size:.95rem }
.inm-tabla th, .inm-tabla td{ padding:13px 16px; text-align:left; border-bottom:1px solid var(--line-2) }
.inm-tabla thead th{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; background:var(--surface-2) }
.inm-tabla tbody tr:last-child td{ border-bottom:0 }
.inm-tabla tr.is-destacada td{ background:var(--accent-soft) }
.inm-tabla td:first-child{ font-weight:650 }

/* ── preguntas antes de firmar ──────────────────────────────────────────── */
.inm-preguntas{ display:grid; gap:12px; margin-top:6px; padding:0; list-style:none }
.inm-preguntas li{ background:#fff; border:1px solid var(--line-2); border-radius:16px; padding:18px 20px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start }
.inm-preguntas b{ display:block; margin-bottom:3px }
.inm-preguntas span{ color:var(--ink-2); line-height:1.55 }
/* la clase sola perdía contra `.inm-preguntas span`, que es más específica,
   y el número salía oscuro sobre fondo oscuro: no se veía */
.inm-preguntas .inm-preguntas__n{ display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--accent); color:#fff; font-size:13px; font-weight:700 }

/* ── banda de cierre ────────────────────────────────────────────────────── */
.inm-cta{
  margin-top:clamp(48px,7vw,90px); border-radius:24px; text-align:center; color:#fff;
  padding:clamp(34px,5vw,60px) clamp(20px,4vw,40px);
  background:linear-gradient(135deg,#0B5C7A 0%,#083F55 62%,#062F40 100%);
}
.inm-cta h2{ font-family:var(--font-display); font-weight:700; letter-spacing:-.035em; font-size:clamp(1.7rem,3.6vw,2.7rem); line-height:1.08; margin:0 auto; max-width:20ch; color:#fff }
.inm-cta p{ color:rgba(255,255,255,.86); margin:.7em auto 0; max-width:52ch; line-height:1.55 }
.inm-cta .inm-btn{ margin-top:clamp(18px,2.6vw,26px) }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.inm-faq{ display:grid; gap:10px; margin-top:6px }
.inm-faq details{ background:#fff; border:1px solid var(--line-2); border-radius:14px; padding:2px 18px }
.inm-faq summary{ cursor:pointer; list-style:none; padding:16px 0; font-weight:650; display:flex; justify-content:space-between; gap:14px; align-items:center }
.inm-faq summary::-webkit-details-marker{ display:none }
.inm-faq summary::after{ content:"+"; color:var(--accent); font-size:1.4rem; line-height:1; font-weight:400 }
.inm-faq details[open] summary::after{ content:"–" }
.inm-faq p{ margin:0 0 16px; color:var(--ink-2); line-height:1.6; max-width:72ch }

/* Los enlaces del cuerpo: landing.css los deja del color de la tinta y sin
   subrayado, así que dentro de estas páginas no se distinguían del texto. */
.inm-sec p a, .inm-sec li a, .inm-aviso a, .inm-faq p a{
  color:var(--accent); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;
}
.inm-sec p a:hover, .inm-sec li a:hover{ color:var(--accent-press) }
.inm-card__meta a, .inm-card__link{ text-decoration:none }
.inm-card__meta a:hover{ text-decoration:underline }