/* ==========================================================================
   TABLA DE PRECIOS — se usa en el preview de index.html y en precios.html
   ========================================================================== */
.tabla-precios { width: 100%; border-collapse: collapse; }
.tabla-precios th {
  font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris); text-align: left;
  padding: .8rem 1rem;
  border-bottom: 2px solid var(--linea);
}
.tabla-precios td {
  padding: 1rem; font-size: .92rem;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
  color: var(--gris);
}
.tabla-precios tr:last-child td { border-bottom: 0; }
.tabla-precios tbody tr { transition: background var(--tr); }
.tabla-precios tbody tr:hover { background: var(--menta-2); }
.tabla-precios .t-precio {
  font-family: var(--f-display); font-size: 1.25rem; font-weight: 700;
  color: var(--primario); white-space: nowrap; text-align: right;
}
.tabla-precios .t-nombre { font-weight: 600; color: var(--tinta); }
.tabla-precios .t-nota { display: block; font-size: .76rem; color: var(--gris-suave); margin-top: .2rem; font-weight: 400; }

/* Distintivo junto al nombre (p. ej. "El más elegido" en un pack) */
.tabla-precios .t-nombre .badge { margin-left: .5rem; vertical-align: middle; }