.loader {
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper {
  width: 480px;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.text {
  z-index: 3; 
  position: relative; 
  font-family: Whitney, -apple-system, Helvetica;
  letter-spacing: 1px;
  font-weight: 700;
  font-size: 20px;
  color: white;
  filter: drop-shadow(2px 2px 0px #42c437);
}

.box {
  width: 100%;
  height: 100%;
  background-color: #5e5e5e;
  position: absolute;
  z-index: 1; 
  display: flex;
  align-items: center;
  justify-content: center;
  animation: loading ease-in-out 1s infinite alternate-reverse;
}

@keyframes loading {
  0% {
    transform: translateX(-80px);
  }
  100% {
    transform: translateX(80px);
  }
}

.box::before {
  content: "";
  width: 20px;
  height: 170%;
  background-color: #77bf7289;
  position: absolute;
  z-index: 1;
  animation: loading2 ease-in-out 0.9s infinite alternate-reverse;
}

@keyframes loading2 {
  0% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(50px);
  }
}

h1 {
  font-size: 2rem;
}

h1.windows {
  color: #096cb4;
}

h1.ubuntu {
  color: #f57421;
}

h1.docker {
  color: #1e6be7;
}

h1.postgresql {
  color: #356a8f;
}

.a-windows {
  cursor: url('iconos/windows.png'), auto;
}

.a-ubuntu {
  cursor: url('iconos/ubuntu.png'), auto;
}

.a-docker {
  cursor: url('iconos/docker.png'), auto;
}

.a-postgresql {
  cursor: url('iconos/postgresql.png'), auto;
}

.alert-notification {
    position: fixed;
    top: 90px;
    right: 20px;
    z-index: 9999;
}
.alert {
    background-color: rgb(254 252 232);
    border-left-width: 4px;
    border-color: rgb(250 204 21);
    border-radius: 0.375rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    background: none;
    border: none;
    color: red;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}
.close-btn:hover {
    color: darkred;
}

.fade-in-out {
    opacity: 0;
    animation: fadeIn 0.5s forwards;
}
.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.alert-svg {
    height: 1.25rem;
    width: 1.25rem;
    color: rgb(250 204 21);
}
.alert-prompt-wrap {
    margin-left: 0.75rem;
    color: rgb(202 138 4);
}

/* =============================
   Botón Lobby
   ============================= */
.button {
  margin: 0;
  height: auto;
  background: transparent;
  padding: 0;
  border: none;
  cursor: pointer;
  --border-right: 6px;
  --text-stroke-color: rgba(255,255,255,0.6);
  --animation-color: #37FF8B;
  --fs-size: 2em;
  letter-spacing: 3px;
  text-decoration: none;
  font-size: var(--fs-size);
  font-family: "Arial";
  position: relative;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--text-stroke-color);
}

.hover-text {
  position: absolute;
  box-sizing: border-box;
  content: attr(data-text);
  color: var(--animation-color);
  width: 0%;
  inset: 0;
  border-right: var(--border-right) solid var(--animation-color);
  overflow: hidden;
  transition: 0.5s;
  -webkit-text-stroke: 1px var(--animation-color);
}

.button:hover .hover-text {
  width: 100%;
  filter: drop-shadow(0 0 23px var(--animation-color))
}

/* =============================
   Modo oscuro
   ============================= */

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch #input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 200;
  right: 0;
  bottom: 0;
  background-color: #2196f3;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  z-index: 0;
  overflow: hidden;
}

.sun-moon {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: yellow;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

#input:checked + .slider {
  background-color: black;
}

#input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

#input:checked + .slider .sun-moon {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  background-color: white;
  -webkit-animation: rotate-center 0.6s ease-in-out both;
  animation: rotate-center 0.6s ease-in-out both;
}

.moon-dot {
  opacity: 0;
  transition: 0.4s;
  fill: gray;
}

#input:checked + .slider .sun-moon .moon-dot {
  opacity: 1;
}

.slider.round {
  border-radius: 34px;
}

.slider.round .sun-moon {
  border-radius: 50%;
}

#moon-dot-1 {
  left: 10px;
  top: 3px;
  position: absolute;
  width: 6px;
  height: 6px;
  z-index: 4;
}

#moon-dot-2 {
  left: 2px;
  top: 10px;
  position: absolute;
  width: 10px;
  height: 10px;
  z-index: 4;
}

#moon-dot-3 {
  left: 16px;
  top: 18px;
  position: absolute;
  width: 3px;
  height: 3px;
  z-index: 4;
}

#light-ray-1 {
  left: -8px;
  top: -8px;
  position: absolute;
  width: 43px;
  height: 43px;
  z-index: -1;
  fill: white;
  opacity: 10%;
}

#light-ray-2 {
  left: -50%;
  top: -50%;
  position: absolute;
  width: 55px;
  height: 55px;
  z-index: -1;
  fill: white;
  opacity: 10%;
}

#light-ray-3 {
  left: -18px;
  top: -18px;
  position: absolute;
  width: 60px;
  height: 60px;
  z-index: -1;
  fill: white;
  opacity: 10%;
}

.cloud-light {
  position: absolute;
  fill: #eee;
  animation-name: cloud-move;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

.cloud-dark {
  position: absolute;
  fill: #ccc;
  animation-name: cloud-move;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-delay: 1s;
}

#cloud-1 {
  left: 30px;
  top: 15px;
  width: 40px;
}

#cloud-2 {
  left: 44px;
  top: 10px;
  width: 20px;
}

#cloud-3 {
  left: 18px;
  top: 24px;
  width: 30px;
}

#cloud-4 {
  left: 36px;
  top: 18px;
  width: 40px;
}

#cloud-5 {
  left: 48px;
  top: 14px;
  width: 20px;
}

#cloud-6 {
  left: 22px;
  top: 26px;
  width: 30px;
}

@keyframes cloud-move {
  0% {
    transform: translateX(0px);
  }

  40% {
    transform: translateX(4px);
  }

  80% {
    transform: translateX(-4px);
  }

  100% {
    transform: translateX(0px);
  }
}

.stars {
  transform: translateY(-32px);
  opacity: 0;
  transition: 0.4s;
}

.star {
  fill: white;
  position: absolute;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  animation-name: star-twinkle;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

#input:checked + .slider .stars {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}

#star-1 {
  width: 20px;
  top: 2px;
  left: 3px;
  animation-delay: 0.3s;
}

#star-2 {
  width: 6px;
  top: 16px;
  left: 3px;
}

#star-3 {
  width: 12px;
  top: 20px;
  left: 10px;
  animation-delay: 0.6s;
}

#star-4 {
  width: 18px;
  top: 0px;
  left: 18px;
  animation-delay: 1.3s;
}

@keyframes star-twinkle {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.2);
  }

  80% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1);
  }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 60px;
  margin-top: 60px;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: var(--bg-color);
  color: var(--text-color);
  transition: background 0.3s ease, color 0.3s ease;
  padding-top: 60px;
}

.container {
  flex: 1;
}

header, footer {
  background: var(--header-bg);
  text-align: center;
  padding: 15px;
  background: #333;
  color: white;
  margin-top: auto;
  transition: background 0.3s ease;
}

/* Barra de navegación superior */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #333;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

/* Botón de navegación */
.nav-button {
    color: white;
    text-decoration: none;
    background: #ff5722;
    padding: 8px 15px;
    border-radius: 5px;
    transition: 0.3s;
}

.nav-button:hover {
    background: #e64a19;
}


/* =============================
   Tarjetas imágenes
   ============================= */
/* Estilos para las cards */
.card {
  display: inline-block;
  font-family: Montserrat, sans-serif;
  width: auto;
  height: auto;
  max-width: 70%;
  translate: -6px -6px;
  background: #096cb4;
  border: 3px solid #000000;
  box-shadow: 12px 12px 0 #000000;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  z-index: 9999;
}

.card:hover {
  translate: -6px;
}

.head {
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  font-weight: 900;
  width: 100%;
  height: 32px;
  background: #ffffff;
  padding: 5px 12px;
  color: #000000;
  border-bottom: 3px solid #000000;
}

.content {
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content img {
  max-width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

#modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: center;
}

.modal-content {
  max-width: 80%;
  max-height: 80%;
  border: 3px solid #000;
  box-shadow: 12px 12px 0 #000000;
  background: white;
  cursor: grab;
  transition: transform 0.1s ease-out;
}

.close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 30px;
  color: white;
  cursor: pointer;
  font-weight: bold;
}

.close:hover {
  color: #ff66a3;
}

/* Botón UI */ 
.ui-btn {
  --btn-default-bg: rgb(41, 41, 41);
  --btn-padding: 15px 20px;
  --btn-hover-bg: rgb(51, 51, 51);
  --btn-transition: .3s;
  --btn-letter-spacing: .1rem;
  --btn-animation-duration: 1.2s;
  --btn-shadow-color: rgba(0, 0, 0, 0.137);
  --btn-shadow: 0 2px 10px 0 var(--btn-shadow-color);
  --hover-btn-color: #FAC921;
  --default-btn-color: #fff;
  --font-size: 16px;
  --font-weight: 600;
  --font-family: Menlo,Roboto Mono,monospace;
}

.ui-btn {
  box-sizing: border-box;
  padding: var(--btn-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--default-btn-color);
  font: var(--font-weight) var(--font-size) var(--font-family);
  background: var(--btn-default-bg);
  border: none;
  cursor: pointer;
  transition: var(--btn-transition);
  overflow: hidden;
  box-shadow: var(--btn-shadow);
}

.ui-btn span {
  letter-spacing: var(--btn-letter-spacing);
  transition: var(--btn-transition);
  box-sizing: border-box;
  position: relative;
  background: inherit;
}

.ui-btn span::before {
  box-sizing: border-box;
  position: absolute;
  content: "";
  background: inherit;
}

.ui-btn:hover, .ui-btn:focus {
  background: var(--btn-hover-bg);
}

.ui-btn:hover span, .ui-btn:focus span {
  color: var(--hover-btn-color);
}

.ui-btn:hover span::before, .ui-btn:focus span::before {
  animation: chitchat linear both var(--btn-animation-duration);
}

@keyframes chitchat {
  0% {
    content: "#";
  }

  5% {
    content: ".";
  }

  10% {
    content: "^{";
  }

  15% {
    content: "-!";
  }

  20% {
    content: "#$_";
  }

  25% {
    content: "№:0";
  }

  30% {
    content: "#{+.";
  }

  35% {
    content: "@}-?";
  }

  40% {
    content: "?{4@%";
  }

  45% {
    content: "=.,^!";
  }

  50% {
    content: "?2@%";
  }

  55% {
    content: "\;1}]";
  }

  60% {
    content: "?{%:%";
    right: 0;
  }

  65% {
    content: "|{f[4";
    right: 0;
  }

  70% {
    content: "{4%0%";
    right: 0;
  }

  75% {
    content: "'1_0<";
    right: 0;
  }

  80% {
    content: "{0%";
    right: 0;
  }

  85% {
    content: "]>'";
    right: 0;
  }

  90% {
    content: "4";
    right: 0;
  }

  95% {
    content: "2";
    right: 0;
  }

  100% {
    content: "";
    right: 0;
  }
}

.btn-shine {
  display: inline-block;
  padding: 12px 48px;
  color: #fff;
  background: linear-gradient(to right, #9f9f9f 0, #fff 10%, #868686 20%);
  background-position: 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s infinite linear;
  animation-fill-mode: forwards;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  font-family: "Poppins", sans-serif;
  margin-right: 10px;
}

.btn-ubuntu {
  background: linear-gradient(to right, #9f9f9f 0, #fff 10%, #f57421 20%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-windows {
  background: linear-gradient(to right, #9f9f9f 0, #fff 10%, #096cb4 20%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-docker {
  background: linear-gradient(to right, #9f9f9f 0, #fff 10%, #1e6be7 20%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-postgresql {
  background: linear-gradient(to right, #9f9f9f 0, #fff 10%, #356a8f 20%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@-moz-keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 180px;
  }
}
@-webkit-keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 180px;
  }
}
@-o-keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 180px;
  }
}
@keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 180px;
  }
}

#scrollTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

#scrollTopBtn:hover {
    background-color: #;
}

.delete-button {
  background-color: #000;
  color: #fff;
  font-size: 17px;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 8px;
  width: 60px;
  height: 65px;
  border-radius: 15px 15px 12px 12px;
  cursor: pointer;
  position: relative;
  will-change: transform;
  transition: all 0.1s ease-in-out 0s;
  user-select: none;
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.8),
      rgba(0, 0, 0, 0)
    ),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  background-position: bottom right, bottom right;
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  box-shadow: inset -4px -10px 0px rgba(255, 255, 255, 0.4),
    inset -4px -8px 0px rgba(0, 0, 0, 0.3), 0px 2px 1px rgba(0, 0, 0, 0.3),
    0px 2px 1px rgba(255, 255, 255, 0.1);
  transform: perspective(70px) rotateX(5deg) rotateY(0deg);
}

.delete-button:active {
  will-change: transform;
  transform: perspective(80px) rotateX(5deg) rotateY(1deg) translateY(3px)
    scale(0.96);
  height: 64px;
  border: 0.25px solid rgba(0, 0, 0, 0.2);
  box-shadow: inset -4px -8px 0px rgba(255, 255, 255, 0.2),
    inset -4px -6px 0px rgba(0, 0, 0, 0.8), 0px 1px 0px rgba(0, 0, 0, 0.9),
    0px 1px 0px rgba(255, 255, 255, 0.2);
  transition: all 0.1s ease-in-out 0s;
}

.delete-button::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.2),
    rgba(0, 0, 0, 0.5)
  );
  z-index: -1;
  border-radius: 15px;
  box-shadow: inset 4px 0px 0px rgba(255, 255, 255, 0.1),
    inset 4px -8px 0px rgba(0, 0, 0, 0.3);
  transition: all 0.1s ease-in-out 0s;
}

.delete-button::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.8),
      rgba(0, 0, 0, 0)
    ),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  background-position: bottom right, bottom right;
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  z-index: -1;
  border-radius: 15px;
  transition: all 0.1s ease-in-out 0s;
}

:root {
    --bg-color: #f4f4f4;
    --text-color: #333;
    --container-bg: white;
    --header-bg: #333;
    --footer-bg: #333;
}

body.dark-mode {
    --bg-color: #1e1e1e;
    --text-color: #f4f4f4;
    --container-bg: #2c2c2c;
    --header-bg: #111;
    --footer-bg: #111;
}

.dark-mode .head {
    background-color: #222;
    color: #fff; 
}

#windows, #ubuntu, #docker, #postgresql{
    scroll-margin-top: 80px; 
}

#windows {
  cursor: url('iconos/windows.png') 16 16, auto;
}

#ubuntu {
  cursor: url('iconos/ubuntu.png') 16 16, auto;
}

#docker {
  cursor: url('iconos/docker.png') 16 16, auto;
}

#postgresql {
  cursor: url('iconos/postgresql.png') 16 16, auto;
}

.card2 {
    position: relative;
    width: auto;
    min-width: 300px;
    max-width: 80%;
    min-height: 100px;
    padding: 20px;
    border-radius: 14px;
    z-index: 4;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 5px 5px 15px #bebebe, -5px -5px 15px #ffffff;
}

.bg {
    position: relative;
    width: 100%;
    min-height: 100px;
    padding: 20px;
    z-index: 2;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(24px);
    border-radius: 200px;
    outline: 2px solid white;
    color: black;
    text-align: center;
    word-wrap: break-word;
    border: 2px solid rgba(0, 0, 0, 0.2);
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    line-height: 1.4;
}

.dark-mode .bg {
    background-color: #222;
    color: #fff; 
}

.blob {
    position: absolute;
    z-index: 1;
    width: 150%;
    height: 150%;
    border-radius: 50%;
    background-color: #1e6be7;
    opacity: 0.9;
    filter: blur(40px);
    animation: blob-move 6s infinite ease-in-out;
}

@keyframes blob-move {
    0% { transform: translate(-50%, -50%) scale(1); }
    25% { transform: translate(50%, -50%) scale(1.2); }
    50% { transform: translate(50%, 50%) scale(1.4); }
    75% { transform: translate(-50%, 50%) scale(1.2); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

.copy-btn {
  width: 120px;
  height: 45px;
  background-color: #fff;
  border: none;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.342);
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0px;
  position: relative;
  overflow: hidden;
  transition-duration: .5s;
}

.text {
  color: rgb(184, 236, 104);
  font-weight: 800;
  letter-spacing: 1.1px;
  z-index: 2;
}

.svgIcon {
  z-index: 2;
}

.svgIcon path {
  fill: #1e6be7;
}

.copy-btn:hover {
  color: rgb(230, 255, 193);
}

.effect {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #1e6be7;
  border-radius: 50%;
  z-index: 1;
  opacity: 0;
  transition-duration: .5s;
}

.copy-btn:hover .effect {
  transform: scale(15);
  transform-origin: center;
  opacity: 1;
  transition-duration: .5s;
}

.copy-btn:hover {
  box-shadow: 0px 0px 5px #1e6be7,
  0px 0px 10px #1e6be7,
  0px 0px 30px #1e6be7;
  transition-duration: .7s;
}

.copy-btn:hover .text {
  color: rgb(65, 64, 64);
}

.copy-btn:hover .svgIcon path {
  fill: rgb(65, 64, 64);
}

.dark-mode .copy-btn {
    background-color: #222;
    color: #fff; 
}

/* =============================
   Divs Ubuntu
   ============================= */

#div2 {
  background: #f57421;
}

#div2_2 {
  background: #da5f10;
}

/* =============================
   Div Docker
   ============================= */

#div3 {
  background: #1e6be7;
}

/* =============================
   Divs Postgresql
   ============================= */

#div4 {
  background: #356a8f;
}

#div4_4 {
  background: #0263a6;
}

.no-scroll {
    overflow: hidden;
    height: 100vh;
}

.bgd {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.bgd::before {
  content: "";
  position: absolute;
  inset: -145%;
  rotate: -45deg;
  background: #000;
  background-image: radial-gradient(4px 100px at 0px 235px, #0f0, #0000),
    radial-gradient(4px 100px at 300px 235px, #0f0, #0000),
    radial-gradient(1.5px 1.5px at 150px 117.5px, #0f0 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 252px, #0f0, #0000),
    radial-gradient(4px 100px at 300px 252px, #0f0, #0000),
    radial-gradient(1.5px 1.5px at 150px 126px, #0f0 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 150px, #0f0, #0000),
    radial-gradient(4px 100px at 300px 150px, #0f0, #0000),
    radial-gradient(1.5px 1.5px at 150px 75px, #0f0 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 253px, #0f0, #0000),
    radial-gradient(4px 100px at 300px 253px, #0f0, #0000),
    radial-gradient(1.5px 1.5px at 150px 126.5px, #0f0 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 204px, #0f0, #0000),
    radial-gradient(4px 100px at 300px 204px, #0f0, #0000),
    radial-gradient(1.5px 1.5px at 150px 102px, #0f0 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 134px, #0f0, #0000),
    radial-gradient(4px 100px at 300px 134px, #0f0, #0000),
    radial-gradient(1.5px 1.5px at 150px 67px, #0f0 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 179px, #0f0, #0000),
    radial-gradient(4px 100px at 300px 179px, #0f0, #0000),
    radial-gradient(1.5px 1.5px at 150px 89.5px, #0f0 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 299px, #0f0, #0000),
    radial-gradient(4px 100px at 300px 299px, #0f0, #0000),
    radial-gradient(1.5px 1.5px at 150px 149.5px, #0f0 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 215px, #0f0, #0000),
    radial-gradient(4px 100px at 300px 215px, #0f0, #0000),
    radial-gradient(1.5px 1.5px at 150px 107.5px, #0f0 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 281px, #0f0, #0000),
    radial-gradient(4px 100px at 300px 281px, #0f0, #0000),
    radial-gradient(1.5px 1.5px at 150px 140.5px, #0f0 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 158px, #0f0, #0000),
    radial-gradient(4px 100px at 300px 158px, #0f0, #0000),
    radial-gradient(1.5px 1.5px at 150px 79px, #0f0 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 210px, #0f0, #0000),
    radial-gradient(4px 100px at 300px 210px, #0f0, #0000),
    radial-gradient(1.5px 1.5px at 150px 105px, #0f0 100%, #0000 150%);
  background-size:
    300px 235px,
    300px 235px,
    300px 235px,
    300px 252px,
    300px 252px,
    300px 252px,
    300px 150px,
    300px 150px,
    300px 150px,
    300px 253px,
    300px 253px,
    300px 253px,
    300px 204px,
    300px 204px,
    300px 204px,
    300px 134px,
    300px 134px,
    300px 134px,
    300px 179px,
    300px 179px,
    300px 179px,
    300px 299px,
    300px 299px,
    300px 299px,
    300px 215px,
    300px 215px,
    300px 215px,
    300px 281px,
    300px 281px,
    300px 281px,
    300px 158px,
    300px 158px,
    300px 158px,
    300px 210px,
    300px 210px,
    300px 210px;
  animation: hi 150s linear infinite;
}

@keyframes hi {
  0% {
    background-position:
      0px 220px,
      3px 220px,
      151.5px 337.5px,
      25px 24px,
      28px 24px,
      176.5px 150px,
      50px 16px,
      53px 16px,
      201.5px 91px,
      75px 224px,
      78px 224px,
      226.5px 350.5px,
      100px 19px,
      103px 19px,
      251.5px 121px,
      125px 120px,
      128px 120px,
      276.5px 187px,
      150px 31px,
      153px 31px,
      301.5px 120.5px,
      175px 235px,
      178px 235px,
      326.5px 384.5px,
      200px 121px,
      203px 121px,
      351.5px 228.5px,
      225px 224px,
      228px 224px,
      376.5px 364.5px,
      250px 26px,
      253px 26px,
      401.5px 105px,
      275px 75px,
      278px 75px,
      426.5px 180px;
  }
  to {
    background-position:
      0px 6800px,
      3px 6800px,
      151.5px 6917.5px,
      25px 13632px,
      28px 13632px,
      176.5px 13758px,
      50px 5416px,
      53px 5416px,
      201.5px 5491px,
      75px 17175px,
      78px 17175px,
      226.5px 17301.5px,
      100px 5119px,
      103px 5119px,
      251.5px 5221px,
      125px 8428px,
      128px 8428px,
      276.5px 8495px,
      150px 9876px,
      153px 9876px,
      301.5px 9965.5px,
      175px 13391px,
      178px 13391px,
      326.5px 13540.5px,
      200px 14741px,
      203px 14741px,
      351.5px 14848.5px,
      225px 18770px,
      228px 18770px,
      376.5px 18910.5px,
      250px 5082px,
      253px 5082px,
      401.5px 5161px,
      275px 6375px,
      278px 6375px,
      426.5px 6480px;
  }
}

.loader2 {
    position: relative;
    overflow: hidden;
    width: 0px;
    white-space: nowrap;
    display: inline-block;
    margin-top: 31px;
    margin-left: -13px;
}

.loader-text {
    font-size: 10px;
    font-weight: 700;
    background: linear-gradient(to right, #d0dfe9, #46494b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Animación de escritura */
@keyframes typewriter {
    from { width: 0px; }
    to { width: 100%; }
}

@keyframes blink {
    50% {
        border-right-color: transparent;
    }
}