/*
 * Página de precios: comparativo en tabla y ajustes de los bloques que comparte con el inicio
 * (tarjetas, pasos, cierre). Solo usa los tokens de base.css. Mobile-first.
 */

.portada--corta {
  padding-block: var(--espacio-8);
}

/* ---- Comparativo ---- */

.comparativo__marco {
  max-width: 52rem;
  margin-inline: auto;
  overflow-x: auto;
  border: 1px solid var(--color-linea);
  border-radius: var(--radio);
  background: var(--color-papel);
  box-shadow: var(--sombra-suave);
}

.comparativo {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 1rem;
}

.comparativo th,
.comparativo td {
  padding: var(--espacio-3) var(--espacio-4);
  border-bottom: 1px solid var(--color-linea);
  text-align: center;
  vertical-align: middle;
}

.comparativo thead th {
  font-family: var(--fuente-titulos);
  font-size: 1.125rem;
  font-weight: 600;
}

.comparativo tbody th {
  font-weight: 500;
  text-align: left;
}

.comparativo tbody tr:last-child th,
.comparativo tbody tr:last-child td {
  border-bottom: 0;
}

.comparativo__destacado {
  background: var(--color-acento-suave);
}

.comparativo td span[aria-hidden="true"] {
  color: var(--color-salvia);
  font-size: 1.25rem;
  font-weight: 700;
}

.comparativo td strong {
  font-family: var(--fuente-titulos);
  font-size: 1.375rem;
}

/* ---- Métodos y pasos ---- */

.metodos {
  max-width: 44rem;
  margin-inline: auto;
}

@media (min-width: 64em) {
  /* Dos tarjetas centradas en la rejilla de seis columnas heredada del inicio. */
  .metodos {
    grid-template-columns: repeat(2, 1fr);
  }

  .metodos .tarjeta,
  .metodos .tarjeta:nth-child(4),
  .metodos .tarjeta:nth-child(5) {
    grid-column: auto;
  }

  .pasos--tres {
    grid-template-columns: repeat(3, 1fr);
  }
}