/* El grupo del medio queda en el centro de la pastilla.
   Logo y acciones ocupan columnas iguales, así las dos barras coinciden. */
@media (min-width: 768px) {
  nav.fixed.inset-x-0.top-0 > div.mx-auto,
  nav.site-nav > .site-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }

  nav.fixed.inset-x-0.top-0 > div.mx-auto > :first-child,
  nav.site-nav > .site-bar > :first-child {
    justify-self: start;
  }

  nav.fixed.inset-x-0.top-0 > div.mx-auto > :nth-child(2),
  nav.site-nav > .site-bar > :nth-child(2) {
    justify-self: center;
  }

  nav.fixed.inset-x-0.top-0 > div.mx-auto > :last-child,
  nav.site-nav > .site-bar > :last-child {
    justify-self: end;
  }
}

#planes .planes-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  #planes .planes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  #planes .planes-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.login-screen {
  background:
    radial-gradient(900px 480px at 80% -10%, rgba(134, 59, 255, 0.16), transparent 60%),
    radial-gradient(700px 420px at 12% 0%, rgba(1, 245, 157, 0.14), transparent 55%),
    #f7f6f2;
}