/* ===== Planes — estilos específicos ===== */
:root{
  --tm-yellow:#C4D814;
  --tm-turq:#40E0D0;
  --tm-grey:#424242;
  --tm-white:#FDFCFB;
  --border:#E5E7EB;
  --muted:#6b7280;
}

/* Espaciados del hero */
.hero { padding-top: 28px; padding-bottom: 6px; }
.hero-title { color:#111; }
.hero-sub { color: var(--muted); }

/* Grilla principal: cae a 1 columna en pantallas chicas */
.grid.grid-2 {
  display:grid;
  gap:16px;
}
@media (min-width: 900px){
  .grid.grid-2 { grid-template-columns: 1fr 1fr; }
}

/* Card base (se complementa con components.css) */
.card {
  background:#fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(34,34,34,.05);
}

/* Títulos y subtítulos */
.card > header h2 {
  margin: 0 0 2px 0;
  font-weight: 800;
  color: #111;
}
.card > header .hint { margin: 0; }

/* Listas de características */
.card ul { margin: 10px 0 0 1.1rem; }
.card li { margin: 6px 0; color: var(--tm-grey); }

/* Acciones */
.actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.btn { min-width: 160px; }

/* ===== Resaltado Premium ===== */
.grid.grid-2 > .card:nth-of-type(2) {
  position: relative;
  border: 2px solid color-mix(in srgb, var(--tm-turq) 70%, #0ff);
  box-shadow:
    0 10px 24px rgba(0,0,0,.06),
    0 0 0 6px color-mix(in srgb, var(--tm-turq) 15%, transparent);
}
.grid.grid-2 > .card:nth-of-type(2)::before {
  content: "Recomendado";
  position: absolute;
  top: -12px; right: 16px;
  background: linear-gradient(135deg, var(--tm-turq), var(--tm-yellow));
  color:#0b0b0b;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .82rem;
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
}

/* Contenedor del precio/checkout Premium */
.grid.grid-2 > .card:nth-of-type(2) .card {
  background: #fff;
  border: 1px dashed var(--border);
  border-radius: 14px;
}
.grid.grid-2 > .card:nth-of-type(2) h3 {
  font-weight: 800;
  margin: 0 0 8px 0;
}
.grid.grid-2 > .card:nth-of-type(2) .btn.btn-primary {
  background: linear-gradient(135deg, var(--tm-yellow), color-mix(in srgb, var(--tm-yellow) 65%, var(--tm-turq)));
  color:#0b0b0b;
  border: none;
}

/* ===== Resumen comparativo ===== */
#cmpTitle { margin-top: 0; }
section.card > .grid { display:grid; gap: 12px; }
section.card > .grid h3 { margin: 0 0 6px 0; font-weight: 800; }
section.card > .grid ul { margin: 0 0 0 1rem; }
section.card > .grid li { margin: 4px 0; }

/* ===== Bloque de condiciones ===== */
.terms-content {
  max-height: 220px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
}
.terms-content::-webkit-scrollbar { width: 10px; }
.terms-content::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--tm-turq) 40%, #ccc);
  border-radius: 999px;
}

/* ===== Etiquetas/badges ===== */
.badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#101010;
  color:#fff;
  border-radius:999px;
  padding:6px 12px;
  font-size:.86rem;
  font-weight:800;
}

/* ===== Ajustes responsivos finos ===== */
@media (max-width: 640px){
  .btn { width: 100%; }
  .actions { justify-content: stretch; }
  .grid.grid-2 > .card:nth-of-type(2)::before {
    right: 10px; top: -14px;
    transform: scale(.95);
  }
}