/* estilo general */
* {
  margin: 0;            /* Quitamos los márgenes predeterminados */
  padding: 0;           /* Quitamos el padding predeterminado */
  box-sizing: border-box; /* Incluye padding y borde dentro del tamaño total */
}

body { 
  background-repeat: no-repeat;   /* No repetir la imagen */
  background-size: cover;         /* Cubrir toda la pantalla */
  color: white;                   /* Texto blanco por defecto */
  font-style: oblique;            /* Texto ligeramente inclinado */       
  display: flex;                  /* Usamos flexbox para organizar el contenido verticalmente */
  flex-direction: column;
  align-items: center;            /* Centra los elementos horizontalmente */
}

/* header */

header {
  background-color: transparent;  /* Fondo transparente */
  border: 2px solid #d580ff;      /* Borde morado suave */
  color: #d580ff;                 /* Texto morado */
  font-size: 16px;                /* Tamaño de letra */
  padding: 10px 20px;             /* Espacio interno */
  border-radius: 25px;            /* Bordes redondeados */
  position: relative;
  z-index: 1;                     /* Asegura que esté encima del fondo */
  text-align: center;             /* Centrado horizontal del texto */
}

#video-fondo {
  position: fixed;     /* El video queda fijo en la pantalla */
  top: 0;
  left: 0;
  width: 100%;         /* Ocupa todo el ancho */
  height: 100vh;       /* Ocupa toda la altura de la ventana */
  object-fit: cover;   /* Ajusta el video sin deformarlo */
  z-index: -1;         /* Se coloca detrás del contenido */
}


/*personalizacion de los textos h2*/
h2 {
  font-size: 35px;                /* Tamaño grande para títulos */
  color: #d580ff;                 /* Color morado */
  text-align: center;             /* Centrado */
  margin-bottom: 25px;            /* Espacio inferior */
}

/* contenido principal */

.container {
  width: 90%;                     /* Ocupa la mayoría del ancho */
  max-width: 1000px;              /* Máximo ancho */
  margin: 50px auto;              /* Centrado horizontal y margen vertical */
  text-align: center;             /* Centrado del contenido dentro */
}

/* tablas */

table {
  width: 100%;                    /* Ocupa todo el ancho del contenedor */
  border-collapse: collapse;      /* Une los bordes de celdas */
  color: white;                   /* Texto blanco */
  margin-left: auto;
  margin-right: auto;             /* Centrado horizontal */
  text-align: center;             /* Centrado del texto en las celdas */
  border-style: solid;
  border-width: 5px;
  border-color: #800080;          /* Borde morado oscuro */
  animation: borderPulse 3s infinite ease-in-out; /* Animación de pulso del borde */
}

/* Animación para la tabla y footer */
@keyframes borderPulse {
  0% { border-color: #800080; border-width: 5px; }  /* Comienzo */
  50% { border-color: #d580ff; border-width: 10px; }/* Medio de animación */
  100% { border-color: #800080; border-width: 5px; }/* Fin */
}

/* Estilos de celdas */
th, td {
  border: 1px solid white;        /* Bordes blancos */
  padding: 12px;                  /* Espacio dentro de celdas */
  vertical-align: middle;         /* Centrado vertical del contenido */
}

/* Fila alternada para contraste */
tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.05); /* Muy tenue para no distraer */
}


/* SECCIÓN DE INTERACCIÓN (FORMULARIOS, INPUTS, BOTONES) */

#interaccion {
  margin-top: 50px;               /* Separación superior */
  text-align: center;             /* Centrado */
  border: 2px solid #d580ff;      /* Borde morado */
  border-radius: 15px;            /* Bordes redondeados */
  padding: 25px;                  /* Espacio interno */
  width: 80%;
  max-width: 700px;               /* Limita el tamaño en pantallas grandes */
  background-color: rgba(0, 0, 0, 0.6); /* Fondo semitransparente */
}

/* Estilo de inputs */
#interaccion input {
  padding: 10px;                  /* Espacio interno */
  border-radius: 10px;
  border: 2px solid #d580ff;      /* Borde morado */
  background: transparent;        /* Fondo transparente */
  color: white;                   /* Texto blanco */
  text-align: center;
  width: 60%;
  font-size: 16px;
}

/* Botones */
#interaccion button {
  background-color: transparent;  
  border: 2px solid white;
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;                /* Cambia el cursor al pasar el mouse */
  transition: 0.3s;               /* Transición suave para hover */
}

#interaccion button:hover {
  background-color: #582443;      /* Fondo al pasar el mouse */
  border-color: #d580ff;          /* Borde morado */
}

/* FOOTER */

footer {
  background-color: transparent;
  border: 2px solid #43C6B4;      /* Borde azul */
  color: #43C6B4;                 /* Texto azul */
  border-radius: 20px;            /* Bordes redondeados */
  width: 90%;
  bottom: 0;
  margin-bottom: 0;
  position: absolute;
  padding: 15px;
  text-align: center;
  animation: borderPulse 3s infinite ease-in-out; /* Animación de borde */
  width: 100%;
}

/* Texto interno del footer */
#Cote {
  text-align: end;                /* Alineación derecha */
  color: #d580ff;
  margin-right: 20px;
}

#Andromeda {
  text-align: left;               /* Alineación izquierda */
  color: #d580ff;
  margin-left: 20px;
}

/* Botón de regresar dentro del footer */
footer button {
  background-color: transparent;
  border: 2px solid #d580ff;
  color: white;
  padding: 8px 20px;
  border-radius: 25px;
  cursor: pointer;
  transition: 0.3s;
}

footer button:hover {
  background-color: #582443;
  border-color: #d580ff;
}