:root {
  --primary: #2c4a63;
  --secondary: #6f8fa6;
  --light: #fdfdfd;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 🔴 pantalla completa sin scroll */
html, body {
  height: 100%;
  overflow: hidden;
  background: var(--light);
  font-family: Arial, sans-serif;
}

/* contenedor ocupa todo */
.container {
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* 🔴 imagen siempre completa */
.main-image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* CLAVE */
  display: block;
}

/* overlay centrado proporcionalmente */
.overlay {
  position: absolute;

  /* Ajuste fino según tu imagen */
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 25%;
}

/* laptop */
.laptop {
  width: 100%;
  text-align: center;
}

/* engranaje */
.gear {
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
  border: 6px solid var(--primary);
  border-radius: 50%;
  border-top: 6px solid transparent;
  animation: spin 2s linear infinite;
}

/* barra */
.progress-bar {
  width: 100%;
  height: 10px;
  background: #ddd;
  border-radius: 5px;
  overflow: hidden;
}

.progress {
  width: 0%;
  height: 100%;
  background: var(--secondary);
  animation: load 4s infinite;
}

/* animaciones */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes load {
  0% { width: 0%; }
  50% { width: 80%; }
  100% { width: 100%; }
}

/* responsive fino */
@media (max-width: 768px) {
  .overlay {
    width: 40%;
    top: 58%;
  }
}

@media (max-width: 480px) {
  .overlay {
    width: 55%;
    top: 60%;
  }

  .gear {
    width: 30px;
    height: 30px;
  }
}