/* NINIA — Agencias, brokers y asesores independientes. Depende de base.css. */

.phero-ases { --phero-op: .5; --phero-pos: 64% 38%; }
.phero-ases .phero-sub { margin-bottom: 34px; }

/* ───────── tarjeta de caso del hero ─────────
   Llevaba backdrop-filter decorativo; fondo sólido semiopaco da la misma
   lectura sobre la foto sin recomponer el desenfoque. */
.caso {
  max-width: 400px;
  margin-left: auto;
  background: rgb(var(--dark-rgb) / .72);
  border: 1px solid rgb(var(--cream-rgb) / .15);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 20px 48px rgb(0 0 0 / .32);
}
.cs-top {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid rgb(var(--cream-rgb) / .1);
  margin-bottom: 16px;
}
.cs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage-2); flex-shrink: 0; margin-top: 6px; }
.cs-top b { display: block; font-size: var(--t-xs); color: var(--cream); }
.cs-top i { font-style: normal; font-size: var(--t-2xs); color: rgb(var(--cream-rgb) / .68); }
.cs-rows { display: grid; gap: 9px; }
.cs-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--t-2xs); }
.cs-row span { color: rgb(var(--cream-rgb) / .68); flex-shrink: 0; }
.cs-row b { color: var(--cream); font-weight: 600; text-align: right; }
.cs-row-warn b { color: var(--terracota-3); }
.cs-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgb(var(--cream-rgb) / .1);
  font-size: var(--t-2xs);
  color: rgb(var(--cream-rgb) / .68);
}

/* ───────── dolores ─────────
   Llevaban border-left de 3px de color. Ahora tinte de fondo y borde
   completo, que es lo que el sistema permite. */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: var(--gap-card);
}
.pain {
  background: var(--terracota-bg);
  border: 1px solid var(--terracota-border);
  border-radius: var(--radius);
  padding: 30px 28px 32px;
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out), box-shadow .3s ease;
}
.pain:hover { box-shadow: 0 12px 30px rgb(var(--ink-rgb) / .07); }
.pain h3 { font-family: var(--font-serif); font-size: var(--t-md); font-weight: 400; margin-bottom: 11px; line-height: 1.2; }
.pain p { font-size: var(--t-xs); line-height: 1.62; color: var(--ink-2); }

.piece-rev .piece-copy { order: 2; }
.piece-rev .piece-visual { order: 1; }

/* Era border-left de color sobre banda oscura. Regla superior + sangría. */
.quote {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgb(var(--terracota-3-rgb) / .4);
  font-family: var(--font-serif);
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--cream);
}
.quote em { font-style: italic; color: var(--terracota-3); }

/* ───────── bolsa ───────── */
.net-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 18px;
}
.net-card {
  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;
}
.net-card:hover { border-color: rgb(var(--terracota-3-rgb) / .4); }
.net-card-key { background: rgb(var(--sage-2-rgb) / .14); border-color: rgb(var(--sage-2-rgb) / .3); }
.net-card-key:hover { border-color: rgb(var(--sage-2-rgb) / .5); }
.net-dir {
  font-size: var(--t-3xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--terracota-3);
  margin-bottom: 14px;
}
.net-dir-sage { color: var(--sage-2); }
.net-card h3 { font-family: var(--font-serif); font-size: var(--t-sm); font-weight: 400; color: var(--cream); margin-bottom: 11px; line-height: 1.2; }
.net-card p { font-size: var(--t-xs); line-height: 1.6; color: rgb(var(--cream-rgb) / .72); }
.net-note { margin-top: 28px; font-size: var(--t-xs); line-height: 1.6; color: rgb(var(--cream-rgb) / .68); max-width: 70ch; }

/* ───────── independiente ───────── */
.ind {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(2.25rem, 5vw, 3.5rem);
  align-items: start;
}
.ind-copy { min-width: 0; }
.ind-points { margin-top: 30px; display: grid; gap: 20px; }
.ind-point h3 { font-size: var(--t-xs); font-weight: 600; margin-bottom: 5px; letter-spacing: 0; }
.ind-point p { font-size: var(--t-xs); line-height: 1.6; color: var(--ink-2); }

.ind-card {
  background: var(--dark);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: 32px 30px;
  position: sticky;
  top: 100px;
}
.ind-card-tag {
  font-size: var(--t-3xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--terracota-3);
  margin-bottom: 18px;
}
.ind-list { display: grid; gap: 13px; margin-bottom: 24px; }
.ind-list li {
  position: relative;
  padding-left: 22px;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: rgb(var(--cream-rgb) / .78);
}
.ind-list li::before {
  content: '';
  position: absolute;
  left: 0; top: .5em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--terracota-3);
}

.endcta { background: var(--cream); }

@media (max-width: 980px) {
  .phero-ases { --phero-op: .3; }
  .piece-rev .piece-copy { order: 1; }
  .piece-rev .piece-visual { order: 2; }
  .caso { margin: 0 auto; }
  .ind-card { position: static; }
}