/* =========================================================
   Qualis Solutions — página en construcción
   Cambiá los valores de :root para ajustar colores y tamaños.
   ========================================================= */

:root {
  --fondo:        #ffffff;   /* fondo de la página */
  --negro:        #0b0b0c;   /* color del nombre */
  --gris:         #55555c;   /* color de la línea de abajo */
  --morado-logo:  #86268a;   /* morado tomado del logo */
  --celeste-logo: #9fcedc;   /* celeste tomado del logo */

  --ancho-logo:   clamp(190px, 36vw, 360px);
  --tam-marca:    clamp(2rem, 7.5vw, 5rem);
  --tam-estado:   clamp(0.78rem, 2.4vw, 1rem);
}

/* Reset básico */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--fondo);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;

  /* Centra el bloque en la pantalla */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}

/* Bloque central: logo arriba, texto debajo */
.tarjeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  /* Lo sube un poco respecto al centro exacto: se ve mejor */
  margin-bottom: 4vh;
}

.logo {
  width: var(--ancho-logo);
  height: auto;
  display: block;
  margin-bottom: clamp(1.5rem, 4vw, 2.75rem);
}

.marca {
  font-size: var(--tam-marca);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--negro);
  text-wrap: balance;
}

/* Línea con el degradado del logo */
.linea {
  display: block;
  width: clamp(70px, 16vw, 120px);
  height: 3px;
  margin: clamp(1.4rem, 3.5vw, 2rem) 0 clamp(1.1rem, 3vw, 1.5rem);
  background: linear-gradient(90deg, var(--morado-logo), var(--celeste-logo));
}

.estado {
  font-size: var(--tam-estado);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gris);
}

/* ---------- Aparición suave al cargar la página ---------- */
.logo,
.marca,
.linea,
.estado {
  opacity: 0;
  transform: translateY(14px);
  animation: aparecer 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.logo   { animation-delay: 0.05s; }
.marca  { animation-delay: 0.20s; }
.linea  { animation-delay: 0.32s; }
.estado { animation-delay: 0.42s; }

@keyframes aparecer {
  to { opacity: 1; transform: translateY(0); }
}

/* Si el usuario pidió menos animación en su sistema, se muestra fijo */
@media (prefers-reduced-motion: reduce) {
  .logo, .marca, .linea, .estado {
    animation: none;
    opacity: 1;
    transform: none;
  }
}