/* NINIA — Desarrolladores inmobiliarios. Depende de base.css. */

.phero-des { --phero-op: .58; --phero-pos: 72% 42%; }
.phero-des .phero-title { font-size: var(--t-fluid-h1); letter-spacing: -.035em; }
.phero-des .phero-sub { max-width: 60ch; margin-bottom: 34px; }

.phero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 28px;
  max-width: 720px;
  margin-top: 52px;
  padding-top: 30px;
  border-top: 1px solid var(--dark-border);
}
.phero-stats li { display: flex; flex-direction: column; gap: 6px; }
.phero-stats strong {
  font-family: var(--font-serif);
  font-size: var(--t-lg);
  font-weight: 400;
  color: var(--cream);
  letter-spacing: -.03em;
  line-height: 1;
}
.phero-stats span { font-size: var(--t-2xs); line-height: 1.45; color: rgb(var(--cream-rgb) / .68); }

.lit { font-style: italic; color: var(--terracota); }

/* ───────── problema ─────────
   Los tres párrafos llevaban border-left de color. Regla superior. */
.prob { background: var(--cream-2); }
.prob-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.prob-copy, .prob-list { min-width: 0; }
.prob-list { display: grid; gap: 18px; }
.prob-list p {
  font-size: var(--t-xs);
  line-height: 1.62;
  color: var(--ink-2);
  padding-top: 16px;
  border-top: 1px solid var(--terracota-border);
}

/* ───────── inventario ───────── */
.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 18px;
}
.inv {
  background: rgb(var(--surface-rgb) / .05);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius);
  padding: 28px 26px 30px;
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out), border-color .3s ease;
}
.inv:hover { border-color: rgb(var(--terracota-3-rgb) / .4); }
.inv h3 { font-family: var(--font-serif); font-size: var(--t-sm); font-weight: 400; color: var(--cream); margin-bottom: 11px; line-height: 1.2; }
.inv p { font-size: var(--t-xs); line-height: 1.6; color: rgb(var(--cream-rgb) / .72); }

/* ───────── tiempo real ───────── */
.rt-grid { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; margin-bottom: 34px; }
.rt-card {
  flex: 1;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 22px 26px;
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
}
.rt-card-end { background: var(--sage-bg); border-color: rgb(var(--sage-rgb) / .24); }
.rt-n {
  font-family: var(--font-serif);
  font-size: var(--t-2xs);
  color: var(--cream);
  background: var(--terracota);
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin-bottom: 14px;
}
.rt-card-end .rt-n { background: var(--sage); }
.rt-card h3 { font-size: var(--t-xs); font-weight: 600; margin-bottom: 6px; letter-spacing: 0; }
.rt-card p { font-size: var(--t-2xs); line-height: 1.55; color: var(--ink-2); }
.rt-arrow { align-self: center; color: var(--muted); }

/* ───────── bolsa ───────── */
.net {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
  background: var(--dark);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 2.75rem) clamp(1.625rem, 4vw, 2.875rem);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
}
.net-copy, .net-viz { min-width: 0; }
.net-tag {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-size: var(--t-3xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--terracota-3);
  margin-bottom: 16px;
}
.net-title { font-family: var(--font-serif); font-size: var(--t-fluid-h3); font-weight: 400; line-height: 1.14; margin-bottom: 16px; }
.net-copy p { font-size: var(--t-xs); line-height: 1.62; color: rgb(var(--cream-rgb) / .75); }
/* Era border-left de color con dos !important encima. */
.net-copy .net-kicker {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgb(var(--terracota-3-rgb) / .4);
  font-size: var(--t-2xs);
  color: rgb(var(--cream-rgb) / .68);
}

.net-viz { display: grid; gap: 8px; }
.net-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgb(var(--surface-rgb) / .05);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-sm);
}
.net-row-you { background: rgb(var(--terracota-rgb) / .3); border-color: rgb(var(--terracota-3-rgb) / .4); }
.net-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid; place-items: center;
  font-size: var(--t-3xs);
  font-weight: 700;
  background: rgb(var(--surface-rgb) / .1);
  color: rgb(var(--cream-rgb) / .78);
}
.net-row-you .net-avatar { background: var(--terracota); color: var(--cream); }
.net-row div { flex: 1; min-width: 0; }
.net-row b { display: block; font-size: var(--t-2xs); color: var(--cream); }
.net-row i { font-style: normal; font-size: var(--t-2xs); color: rgb(var(--cream-rgb) / .68); }
.net-pct { font-family: var(--font-serif); font-size: var(--t-sm); color: var(--terracota-3); }
.net-drop {
  font-size: var(--t-3xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgb(var(--cream-rgb) / .68);
  text-align: center;
  padding: 4px 0;
}

.rep-link { margin-top: 24px; }
.owner { max-width: 820px; }
.endcta { background: var(--cream); }

@media (max-width: 980px) {
  .phero-des { --phero-op: .3; }
  .rt-arrow { display: none; }
}