/* ============================================================
   Move Your Money — /calculadora (standalone, libre acceso)
   Extiende landing.css + presentacion.css. Solo ajustes de página.
   ============================================================ */

.calcpage-header {
  display: flex;
  justify-content: center;
  padding: clamp(28px, 4vw, 44px) 20px 0;
  background: var(--navy);
}

.calcpage-logo {
  display: inline-block;
  line-height: 0;
}

.calcpage-logo img {
  height: clamp(56px, 7vw, 84px);
  width: auto;
  filter: drop-shadow(0 10px 30px rgba(192, 197, 212, 0.18));
}

/* En el deck la sección ocupa la pantalla completa; acá es la página entera. */
.calcpage-calc {
  min-height: 0;
  padding-top: clamp(36px, 5vw, 64px);
}

.calcpage-sub {
  max-width: 640px;
  margin: 0 auto 22px;
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  line-height: 1.6;
  color: var(--text-on-dark-mute);
}

.calcpage-cta {
  margin-top: 36px;
  text-align: center;
}

@media (max-width: 480px) {
  .calcpage-cta .btn {
    white-space: normal;
    width: 100%;
    padding-inline: 20px;
  }
}

.calcpage-footer {
  padding: 22px 20px 34px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-on-dark-mute);
  background: var(--navy);
}

.calcpage-footer nav {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.calcpage-footer a {
  color: var(--text-on-dark-mute);
  text-decoration: none;
  transition: color var(--duration) var(--ease);
}

.calcpage-footer a:hover,
.calcpage-footer a:focus-visible {
  color: var(--text-on-dark);
}

/* Boxes más anchos que en el deck + 9 períodos (30A y 40A) — pedido Nico 2026-09-01 */
.calcpage-calc .calc-grid {
  grid-template-columns: repeat(3, 400px);
  gap: 14px;
}

@media (max-width: 1280px) {
  .calcpage-calc .calc-grid { grid-template-columns: repeat(3, 340px); }
}

@media (max-width: 1100px) {
  .calcpage-calc .calc-grid { grid-template-columns: repeat(3, 300px); }
}

@media (max-width: 980px) {
  .calcpage-calc .calc-grid { grid-template-columns: 1fr; }
}

.calcpage-calc .calc-period-footer .calc-years {
  grid-template-columns: repeat(9, 1fr);
}

@media (max-width: 600px) {
  .calcpage-calc .calc-period-footer .calc-years { grid-template-columns: repeat(5, 1fr); }
}