body {
  font-family: 'Eb Garamond', serif;
  background-color: #000cb8;
  background: linear-gradient(-45deg, #000cb8, #011eff, #3800ff, #000cb8);
  background-size: 400% 400%;
  animation: animacionfondo 12s ease infinite;
  color: #ffffff;
  padding: 2em;
  z-index: 1;
  /*max-width: 1080px;  /* un poco más ancho */
  /*margin: auto; */
  padding-top: 60px; /* para el menú fijo */
}
@keyframes animacionfondo {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

    .stars{
        position:fixed;
        top: 0;
        left: 0;
        width: 200%;
        height: 200%;
        background-image: radial-gradient(#ffeb3b 10px, transparent 10px);
        background-repeat: repeat;
        background-size: 100px 100px;
        opacity: 0.3;
        pointer-events: none;
        animation: moving_stars 60s linear infinite;
        z-index: -1;
  }

@keyframes moving_stars {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('background_qe.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
  z-index: 1;
  opacity: 1; /* ajustá si querés que se vea más o menos */
}

#contenido-general {
  position: relative;
  z-index: 10;
}
.main-content {
  margin-left: 200px;
  padding: 20px;
}

.sidebar {
  position: fixed;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  width: 200px;
  background: rgba(0, 0, 0, 0.4);
  padding: 10px;
  overflow: visible;
  z-index: 1;
}

.gifdecorativo {
  width: 200px;
  max-width: none;
  height: auto;

}

.sidebar-title {
  color: white;
  font-family: monospace;
  font-size: 16px;
  margin-bottom: 10px;
}

.sidebar a {
  display: block;
  margin: 6px 0;
  text-decoration: none;
}

.sidebar button {
  width: 100%;
  font-family: monospace;
  font-size: 14px;
  padding: 6px;
  background: transparent;
  border: 1px solid white;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.sidebar button:hover {
  background: white;
  color: black;
}

.sidebar a::before {
  content: "➤ ";
  color: white;
  animation: blinkArrow 1.5s infinite;
  margin-right: 4px;
}

@keyframes blinkArrow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.principal {
  color: #ffeb3b;
  text-shadow:
    -1px -1px 0 red,
     1px -1px 0 blue,
    -1px  1px 0 green,
     1px  1px 0 purple;
}

.subrayado {
  display: inline-block;
  position: relative;
  padding-bottom: 1px;
}

.subrayado::before,
.subrayado::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #ffeb3b, #ff0000, #ffeb3b);
  background-size: 200% auto;
  animation: laser 1s linear infinite;
  border-radius: 2px;
  box-shadow: 0 0 5px #ffeb3b;

}
.subrayado::before {
  bottom: 6px;
}
.subrayado::after {
  bottom: 0px;
}

@keyframes laser {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

.parpadeo {
  animation: parpadeo 0.3s infinite;
  font-weight: bold;
  color: #ff00dd;
}

@keyframes parpadeo {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
    .correo {
        color:#ff5e02; 
        text-shadow:
        -1px -1px 0 red,
        -1px -1px 0 blue,
        -1px -1px 0 green,
        -1px -1px 0 purple;
     }
h1, h2 {
  text-align: center;
  font-weight: bold;
}
.destacar span {
  display: inline-block;
  margin-top: 2em;
  margin-bottom: 2em;
  animation: waveFlag 1.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.1s);
    font-style: italic;
    font-weight: bolder;
    font-size: 20pt;
    text-align: center;
    color:#ff00dd;
    text-shadow:
    2px 2px 0 #000000,
    0.2px 0.2px 0 #ffffff,
    0.5px 0.5px #00eeff;

}

@keyframes waveFlag {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
.computer{
  width: 200px;
  max-width: 100%;
  z-index: 1;
}
.gatocomputer{
  width: 150px;
  max-width: 100%;
  z-index: 1;
}
.gifs_trabajo{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 5px 0;
  z-index: 1;
}
.mientras_tanto{
  display: block;
  text-align: center;
  margin-top: 2em;
}
.destacar{
    text-align: center;
}
a {
  color: #b30000;
  /*background: #ffeb3b;*/
  padding: 0.2em 0.2em;
  text-decoration: none;
  font-weight: bold;
  transition: none;
}
.instagram_link {
  background-color: #ffeb3b;  /* amarillo */
  color: #b30000;             /* texto rojo oscuro */
  padding: 0 0.1em;
  font-weight: bold;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.instagram_link:hover {
    background-color: #800000; 
  color: #ffeb3b;           
  text-decoration: underline;
}

a:hover {
  color:#ffeb3b;
    text-decoration: underline;


}

ul {
  padding-left: 1.2em;
}

img {
  display: block;
  margin: 2em auto;
  width: 100px;
}

body {
  padding-top: 10px; 
}
h2 {
  display: flex;
  align-items: center;
  gap: 0.25em;       /* reduce la separación (antes 0.5em) */
  font-size: 1.8em;
  justify-content: center;  /* centra horizontalmente */
  text-align: center;       /* asegura que el texto se centre */
}

h2 .icono {
  width: 24px;  /* un poco más pequeño para que se vea más integrado */
  height: auto;
  animation: parpadeo-a 0.1s infinite;
}


@keyframes parpadeo-a {
  0%   { opacity: 1; }
  20%  { opacity: 0.4; }
  50%  { opacity: 1; }
  70%  { opacity: 0.2; }
  100% { opacity: 1; }
}