html,
body{
  margin:0;
  padding:0;
  overflow-x:hidden;
}

body{
  background:#050505;
}

section,
main{
  margin-bottom:0;
  padding-bottom:0;
}

main{
  position:relative;
  isolation:isolate;

  background:
    radial-gradient(circle at 12% 8%, rgb(0 0 0 / 50%), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(124,58,237,.18), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(15,207,217,.08), transparent 36%),
    linear-gradient(180deg, #020202 0%, #050505 48%, #000 100%);
}

main::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;

  background:
    linear-gradient(rgba(255,255,255,.027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.034) 1px, transparent 1px);

  background-size:70px 70px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.65), transparent 70%);
}

main::after{
  content:"";
  position:absolute;
  left:50%;
  top:115px;
  z-index:-1;

  width:min(880px, 90%);
  height:260px;

  transform:translateX(-50%);

  background:radial-gradient(circle, rgba(15,207,217,.12), transparent 62%);
  filter:blur(28px);
  pointer-events:none;
}
/* evita scroll fantasma en móvil */
body{
    min-height: 100vh;
}

/* estilos para los mensajes de Django */
.z-toast-container{
  position: fixed !important;
  top: 105px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 999999 !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;

  align-items: center !important;
}

.z-toast{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 300px !important;
  padding: 16px 18px !important;
  border-radius: 18px !important;
  background: rgba(5, 12, 22, .94) !important;
  border: 1px solid rgba(15, 207, 217, .4) !important;
  color: #fff !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.38) !important;
  backdrop-filter: blur(14px) !important;
  animation: toastIn .35s ease, toastOut .35s ease 3.5s forwards !important;
  .z-toast-container{
  position: fixed !important;
  top: 105px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 999999 !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;

  align-items: center !important;
}
}

.z-toast i{
  color: #25ff9a !important;
}

.z-toast.success{
  border-color: rgba(37,255,154,.45) !important;
}

@keyframes toastIn{
  from{ opacity:0; transform:translateX(24px); }
  to{ opacity:1; transform:translateX(0); }
}

@keyframes toastOut{
  to{ opacity:0; transform:translateX(24px); pointer-events:none; }
}