body {
  text-align: center;
  background: linear-gradient(434deg, #4260e7, #1c2566, #439df8);
  background-size: 180% 180%;
  animation: gradient-animation 8s ease infinite;

  /* Centrado con Flexbox */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* Tamaño completo de la ventana */
  width: 100vw;
  height: auto;

  /* Elimina o reduce padding */
  padding: 0;
  margin: 5px;
}

footer {
  text-align: center;
  /* background: linear-gradient(334deg, #100530, #100530, #3568d4);
  background-size: 180% 180%;
  animation: gradient-animation 8s ease infinite; */

  /* Centrado con Flexbox */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;

  /* Tamaño completo de la ventana */
  width: 100vw;
  height: 50vh;

  /* Elimina o reduce padding */
  padding: 20px;
  margin: 5px;
}
footer h2{
  font-size: 25px;
  color: #ffffff;
  margin-bottom: 1px;
  font-family: "Archivo Black", sans-serif;
}
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}


h1 {
  font-size: 40px;
  color: #ffffff;
  margin-bottom: 1px;
  font-family: "Archivo Black", sans-serif;
}
h3 {
  /* font-size: 40px; */
  color: #ffffff;
  margin-bottom: 1px;
  font-family: "Archivo Black", sans-serif;
}


p {
  font-size: 18px;
  margin-bottom: 20px;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-weight: 629;
  font-style: normal;
}

a {
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-weight: 529;
  font-style: normal;
}

div {
  font-size: 18px;
  margin-bottom: 20px;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-weight: 629;
  font-style: normal;
}

.botones {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.botones a:hover {
  transform: scale(1.05);
}



.botones a {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 15px 25px;
  font-size: 16px;
  border-radius: 8px;
  transition: background-color 0.3s;
  color: white;
  cursor: pointer;

  /* dejar los botones fijos arriba  */
  .botones {
    position: fixed;
    /* 🔒 Fijo en la pantalla */
    top: 5px;
    /* ⬇️ Separación desde arriba */
    left: 50%;
    /* 📍 Centro horizontal */
    transform: translateX(-50%);
    /* 🔄 Centrado exacto */
    display: flex;
    justify-content: center;
    gap: 20px;
    z-index: 1000;
    /* 🥇 Se asegura de estar por encima de otros elementos */
  }


}

.icono {
  width: 24px;
  height: 24px;
}

.blanco {
  filter: brightness(0) invert(1);
  /* simula blanco */
}




/*ESTOS SON LOS COLORES Y ESTILOS DE LOS BOTONES*/

.html-btn {
  background-color: #e34c26;
}

.css-btn {
  background-color: #264de4;
}

.js-btn {
  background-color: #ffd904;
  color: #000;
}

.Pyth-btn {
  background-color: #439df8;
  color: #000000;
}

.SQL-btn {
  background-color: #c44100;
  color: #000000;
}

.GIT-btn {
  background-color: #000000;
  color: #000000;
}


.html-btn:hover {
  background-color: #ff9436;
}

.css-btn:hover {
  background-color: #567bff;
}

.js-btn:hover {
  background-color: #ffe37d;
}

.Pyth-btn:hover {
  background-color: #00407f;

}

.SQL-btn:hover {
  background-color: #ff8737;

}

.GIT-btn:hover {
  background-color: #4b4b4b;

}

/*  Estilos Tablas Agregar estilos para tarjetas (cards) */

/* .tarjeta-git {
  background-color:#4260e7;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 20px;
  margin: 20px auto;
  max-width: 1200px;
  box-shadow: 0 14px 22px rgba(201, 236, 4, 0.15);
  backdrop-filter: blur(10px);
} */

/* versión mejorada de tu tarjeta, con efectos más modernos, mejor legibilidad y un diseño más pulido: */
.tarjeta-git {
  /* Base styling */
  background: linear-gradient(135deg, rgba(66, 96, 231, 0.9) 0%, rgba(33, 150, 243, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 24px;
  padding: 32px;
  margin: 28px auto;
  max-width: 1000px;
  box-shadow: 
    0 8px 32px rgba(201, 236, 4, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.1),
    inset 0 2px 4px rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px) saturate(120%);
  color: white;
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  position: relative;
}

/* Efecto hover mejorado */
.tarjeta-git:hover {
  transform: translateY(-6px);
  box-shadow: 
    0 16px 48px rgba(201, 236, 4, 0.3),
    0 8px 24px rgba(0, 0, 0, 0.2),
    inset 0 4px 12px rgba(255, 255, 255, 0.4);
}

/* Borde decorativo */
.tarjeta-git::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #c9ec04, #4260e7);
}

/* Tipografía mejorada */
.tarjeta-git h2 {
  font-size: 28px;
  color: #ffd904;
  font-family: "Archivo Black", sans-serif;
  margin: 0 0 16px 0;
  position: relative;
  padding-bottom: 8px;
}

.tarjeta-git h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #c9ec04, transparent);
}

.tarjeta-git h3 {
  font-size: 22px;
  color: #c9ec04;
  margin: 24px 0 12px 0;
}

.tarjeta-git h4 {
  font-size: 18px;
  color: #a8d8ff;
  margin: 20px 0 10px 0;
}

.tarjeta-git p,
.tarjeta-git li {
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 12px;
}

.tarjeta-git ul,
.tarjeta-git ol {
  padding-left: 24px;
  margin: 12px 0;
}

/* Bloques de código mejorados */
.tarjeta-git pre {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 18px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 16px 0;
  border-left: 4px solid #c9ec04;
}

.tarjeta-git code {
  background-color: rgba(0, 0, 0, 0.6);
  color: #00ffc3;
  padding: 3px 6px;
  border-radius: 4px;
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 15px;
  font-weight: 500;
}

/* Tablas mejoradas */
.tabla-git {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  overflow: hidden;
}

.tabla-git th, 
.tabla-git td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
  color: white;
}

.tabla-git th {
  background-color: rgba(0, 0, 0, 0.4);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #c9ec04;
}

.tabla-git tr:last-child td {
  border-bottom: none;
}

.tabla-git tr:hover td {
  background-color: rgba(201, 236, 4, 0.1);
}

/* Secciones internas */
.git-section {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Notas y llamados especiales */
.git-note {
  background: rgba(201, 236, 4, 0.1);
  border-left: 4px solid #c9ec04;
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  margin: 16px 0;
  font-style: italic;
  font-size: 15px;
}

/* Enlaces */
.tarjeta-git a {
  color: #c9ec04;
  text-decoration: none;
  transition: all 0.2s ease;
  border-bottom: 1px dotted rgba(201, 236, 4, 0.3);
}

.tarjeta-git a:hover {
  color: #ffeb3b;
  border-bottom: 1px solid #ffeb3b;
}

/* Responsive */
@media (max-width: 768px) {
  .tarjeta-git {
    padding: 24px;
    margin: 20px 12px;
    border-radius: 18px;
  }
  
  .tarjeta-git h2 {
    font-size: 24px;
  }
  
  .tabla-git th, 
  .tabla-git td {
    padding: 10px 12px;
    font-size: 14px;
  }
}