/* ============================================================
   Tipos de plazo fijo — tarjetas comparativas
   Requiere design-system.css e interior.css.
   ============================================================ */

/* KPIs de entrada */
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.75rem; }
.kpi-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem 1.15rem; box-shadow: var(--shadow-sm);
}
.kpi-card .label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.kpi-card strong { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--blue-dark); margin: 0.2rem 0 0.35rem; }
.kpi-card p { font-size: 0.84rem; color: var(--text-secondary); line-height: 1.55; margin: 0; }

/* Pills de atributo */
.pill-tag {
  display: inline-block; padding: 0.12rem 0.55rem; border-radius: var(--radius-pill);
  font-size: 0.66rem; font-weight: 700; white-space: nowrap;
}
.pill-safe      { background: var(--blue-pale);  color: var(--blue-dark); }
.pill-inflation { background: var(--amber-pale); color: var(--amber-dark); }
.pill-flex      { background: var(--green-pale); color: var(--green); }

/* Grilla de tipos */
.type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.25rem 0 0; }
.type-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.2rem 1.25rem; transition: var(--transition); display: flex; flex-direction: column;
}
.type-card:hover { border-color: var(--blue-light); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.type-card.primary { border-color: #c7dbfc; background: linear-gradient(180deg, var(--blue-pale) 0%, var(--card) 45%); }
.type-card .topline { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.5rem; }
.type-card h3 { font-size: 1.02rem; font-weight: 700; margin: 0; }
.type-card > p { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; margin: 0 0 0.7rem; }
.type-points { list-style: none; margin: 0 0 0.9rem; padding: 0; }
.type-points li {
  position: relative; padding-left: 1.1rem; font-size: 0.83rem;
  color: var(--text-secondary); line-height: 1.5; margin-bottom: 0.35rem;
}
.type-points li::before { content: "›"; position: absolute; left: 0; color: var(--blue-mid); font-weight: 800; }
.type-card .cta { margin-top: auto; font-size: 0.83rem; font-weight: 700; color: var(--blue-mid); }
.type-card .cta:hover { text-decoration: underline; }

/* Objetivos */
.goal-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-top: 1rem; }
.goal-item { background: var(--surface); border-radius: var(--radius-sm); padding: 0.9rem 1rem; }
.goal-item strong { display: block; font-size: 0.88rem; color: var(--text-primary); margin-bottom: 0.25rem; }
.goal-item p { font-size: 0.84rem; color: var(--text-secondary); line-height: 1.55; margin: 0; }

/* Pasos numerados */
.steps { list-style: none; margin: 1rem 0 0; padding: 0; }
.steps li { display: flex; gap: 0.85rem; margin-bottom: 1rem; }
.steps .num {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
  background: var(--blue-dark); color: #fff; font-size: 0.82rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.steps strong { display: block; font-size: 0.92rem; margin-bottom: 0.15rem; }
.steps p { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* Video responsive sin librerías */
.video-wrap { position: relative; padding-top: 56.25%; border-radius: var(--radius-sm); overflow: hidden; margin-top: 1rem; background: #000; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 900px) {
  .kpi-row, .type-grid, .goal-list { grid-template-columns: 1fr; }
}