/* ============================================================
 * miafore.css — estilos específicos del comparador AFORE.
 * Asume que brand.css ya cargó (tokens, .btn, .container, .eyebrow).
 *
 * Excepción del brief: fondo blanco en todo el landing.
 * ============================================================ */

body { background: var(--color-surface); }

/* ------------------------------------------------------------------ NAV */
.mf-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-soft);
}
.mf-nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 68px; gap: var(--space-6);
}
.mf-nav__brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.mf-nav__brand-dot { color: var(--color-accent-dk); }
.mf-nav__sub {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-left: var(--space-2);
}
.mf-nav__links { display: none; gap: var(--space-6); font-size: var(--text-sm); color: var(--color-text-mid); }
.mf-nav__links a { transition: color var(--duration-fast) var(--ease-out-quart); }
.mf-nav__links a:hover { color: var(--color-text); }
@media (min-width: 768px) { .mf-nav__links { display: flex; } }

/* ----------------------------------------------------------------- HERO */
.mf-hero {
  padding: var(--space-24) 0 var(--space-16);
  background: var(--color-surface);
}
.mf-hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-6);
}
.mf-hero__eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--color-primary-lt);
}
.mf-hero__title {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-6);
  max-width: 18ch;
}
.mf-hero__title em { font-style: normal; color: var(--color-accent-dk); }
.mf-hero__lede {
  font-size: var(--text-lg);
  color: var(--color-text-mid);
  max-width: 56ch;
  margin-bottom: var(--space-6);
  line-height: 1.55;
}
.mf-hero__cta { display: inline-flex; }

/* --------------------------------------------------------- COMPARADOR */
.mf-calc {
  padding: var(--space-16) 0 var(--space-24);
}
.mf-calc__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
}
.mf-calc__head {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-soft);
}
.mf-calc__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}
.mf-calc__sub {
  font-size: var(--text-base);
  color: var(--color-text-mid);
}

/* Form ---------------------------------------------------------------- */
.mf-form { display: grid; gap: var(--space-6); }
@media (min-width: 768px) {
  .mf-form { grid-template-columns: repeat(4, 1fr); }
}
.mf-field { display: grid; gap: var(--space-2); }
.mf-field__label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-mid);
}
.mf-field__hint {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}
.mf-input,
.mf-select {
  appearance: none;
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-4);
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--duration-fast) var(--ease-out-quart);
}
.mf-input:hover, .mf-select:hover { border-color: var(--color-text-muted); }
.mf-input:focus, .mf-select:focus { border-color: var(--color-accent); outline: none; }
.mf-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23334155' stroke-width='1.5' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: var(--space-8);
}

/* KPIs ---------------------------------------------------------------- */
.mf-kpis {
  display: grid; gap: var(--space-4);
  margin-top: var(--space-8);
}
@media (min-width: 768px) {
  .mf-kpis { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}
.mf-kpi {
  background: var(--color-bg-tint);
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
  padding: var(--space-6);
}
.mf-kpi--accent {
  background: oklch(96% 0.020 190);
  border-color: oklch(86% 0.040 190);
}
.mf-kpi__label {
  font-size: var(--text-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-bottom: var(--space-3);
}
.mf-kpi__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.mf-kpi__value--accent { color: var(--color-accent-dk); }
.mf-kpi__hint {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-mid);
}

/* Chart container ----------------------------------------------------- */
.mf-chart {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--color-bg-tint);
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
}
.mf-chart__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--space-4);
  gap: var(--space-4);
  flex-wrap: wrap;
}
.mf-chart__title { font-weight: 600; color: var(--color-text); }
.mf-chart__sub { font-size: var(--text-sm); color: var(--color-text-mid); }
.mf-chart__canvas { min-height: 460px; }

/* Tabla --------------------------------------------------------------- */
.mf-table-wrap {
  margin-top: var(--space-8);
  overflow-x: auto;
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
}
.mf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.mf-table th,
.mf-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border-soft);
}
.mf-table th {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
  background: var(--color-bg-tint);
}
.mf-table tbody tr:last-child td { border-bottom: none; }
.mf-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.mf-table tr.is-best td { background: oklch(96% 0.030 145); }
.mf-table tr.is-worst td { background: oklch(96% 0.030 25); }
.mf-table__rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--color-bg-tint);
  font-weight: 600; font-size: 0.7rem;
  color: var(--color-text-mid);
}
.mf-table tr.is-best .mf-table__rank   { background: var(--color-positive); color: white; }
.mf-table tr.is-worst .mf-table__rank  { background: var(--color-negative); color: white; }
.mf-table__dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: var(--space-2);
  vertical-align: middle;
}

/* Estado vacío / loading antes del primer recálculo ------------------ */
.mf-empty {
  padding: var(--space-12);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ------------------------------------------------------- SECCIONES INFO */
.mf-section { padding: var(--space-16) 0; }
.mf-section--tint { background: var(--color-bg-tint); }
.mf-section__title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-4);
  max-width: 24ch;
}
.mf-section__lede {
  font-size: var(--text-lg);
  color: var(--color-text-mid);
  max-width: 60ch;
  margin-bottom: var(--space-8);
  line-height: 1.55;
}
.mf-edu {
  display: grid; gap: var(--space-6);
}
@media (min-width: 768px) {
  .mf-edu { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
.mf-edu__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
  padding: var(--space-6);
}
.mf-edu__title {
  font-size: 1.25rem;
  margin-bottom: var(--space-3);
}
.mf-edu__body {
  color: var(--color-text-mid);
  line-height: 1.6;
}

/* Comisiones table ---------------------------------------------------- */
.mf-fee-table {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
  overflow: hidden;
}
.mf-fee-table table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.mf-fee-table th, .mf-fee-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border-soft);
}
.mf-fee-table th {
  background: var(--color-bg-tint);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
}
.mf-fee-table tr:last-child td { border-bottom: none; }
.mf-fee-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* FAQ ----------------------------------------------------------------- */
.mf-faq__item {
  border-top: 1px solid var(--color-border);
  padding: var(--space-6) 0;
}
.mf-faq__item:last-child { border-bottom: 1px solid var(--color-border); }
.mf-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.mf-faq__item summary::-webkit-details-marker { display: none; }
.mf-faq__item summary::after {
  content: "+";
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--color-text-muted);
  transition: transform var(--duration-mid) var(--ease-out-quart);
}
.mf-faq__item[open] summary::after { transform: rotate(45deg); }
.mf-faq__answer {
  margin-top: var(--space-3);
  color: var(--color-text-mid);
  line-height: 1.6;
}

/* FOOTER -------------------------------------------------------------- */
.mf-footer {
  padding: var(--space-16) 0 var(--space-8);
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-bg);
}
.mf-footer__disclaimer {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 80ch;
  margin-bottom: var(--space-8);
}
.mf-footer__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-soft);
}