* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  text-decoration: none;
}

/* Custom properties */
:root {
  --blanco: #ffffff;
  --negro: #111111;
  --color-primario: #e8611a;
  --color-secundario: #6b7a2f;
  --color-fondo-carta: linear-gradient(
    -45deg,
    var(--color-primario) 0%,
    transparent 30%
  );
  --color-degradado: linear-gradient(var(--blanco), #c9c9c9);
  --color-degradado2: linear-gradient(
    -45deg,
    var(--color-primario) 0%,
    transparent 45%
  );
  --color-fondo-index: linear-gradient(
    -45deg,
    var(--color-primario) 25%,
    transparent 45%
  );
  --color-formulario: linear-gradient(-45deg, #55cb60 0, var(--blanco) 40%);

  /* Sombras */
  --sombra: 3px 3px 14px #ffffff, -3px -3px 14px #ffffff5e;
  --sombra2: 1px 1px 2px var(--color-secundario), -1px -1px 2px #ffffff;
  /* Botones */
  --border: 2px double var(--color-primario);
  --border-radius: 20px;
  /* Tipografía */
  --tipo-principal: "Roboto", sans-serif;
  --tipo-secundaria: Verdana;
  /* Transition */
  --transition: all 0.5s ease-in-out;
}
html {
  color: var(--negro);
  background-color: #111111;
}
body {
  width: 100%;
  padding-bottom: 2rem; /* Espacio adicional al final de la página */
}

/* Fondos transparentes para impresión */
@media print {
  html,
  body {
    background: transparent !important;
    background-color: transparent !important;
  }
}

/* fadeIn - En el <body> de cada página */
.fade-in {
  animation: fadeIn ease 2s;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* LUCES BRILLANTES */
@keyframes STAR {
  0% {
    background: powderblue;
    height: 1px;
    width: 1px;
    box-shadow: 0px 0px 13px white;
  }
  10% {
    background: #cbe8e4;
  }
  20% {
    background: #b0e5cc;
  }
  30% {
    background: #cce5b0;
  }
  40% {
    background: #dae5b0;
  }
  50% {
    background: #e5ddb0;
    width: 4px;
    height: 4px;
    box-shadow: 0px 0px 13px #ffffff;
  }
  100% {
    width: 1px;
    height: 1px;
    background: powderblue;
    box-shadow: 0px 0px 13px white;
  }
}

.star {
  height: 1px;
  width: 1px;
  border-radius: 5px;
  box-shadow: 0px 0px 13px white;
  background: powderblue;
  position: fixed;
}

.star.pulse {
  animation: STAR 2s infinite;
}
