/* ─── PERSEO INFORMÁTICA — BASE ───────────────────────────────────────────── */

body {
  background:   var(--navy);
  color:        var(--silver);
  font-family:  var(--font-ui);
  font-size:    13px;
  line-height:  1.6;
  min-height:   100vh;
  overflow-x:   hidden;
}

/* ── Animaciones globales ──────────────────────────────────────────────────── */

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

@keyframes boot-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(0, 170, 255, 0); }
  50%       { box-shadow: 0 0 0 10px rgba(0, 170, 255, 0.12); }
}

@keyframes boot-fill {
  to { width: 100%; }
}

@keyframes line-in {
  to { opacity: 1; }
}

@keyframes log-appear {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes modal-in {
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* ── Boot screen ───────────────────────────────────────────────────────────── */

#boot {
  position:        fixed;
  inset:           0;
  background:      #000;
  z-index:         var(--z-boot);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             28px;
  transition:      opacity 0.6s ease;
}
#boot.fade-out { opacity: 0; pointer-events: none; }

.boot-logo {
  width:         80px;
  height:        80px;
  border-radius: 50%;
  overflow:      hidden;
  border:        1.5px solid rgba(0, 170, 255, 0.35);
  animation:     boot-pulse 1.5s ease-in-out infinite;
}
.boot-logo img { width: 100%; height: 100%; object-fit: cover; }

.boot-text {
  font-family:     var(--font-ui);
  font-size:       11px;
  color:           rgba(0, 170, 255, 0.6);
  letter-spacing:  3px;
  text-transform:  uppercase;
}

.boot-bar-wrap {
  width:         220px;
  height:        2px;
  background:    rgba(0, 170, 255, 0.1);
  border-radius: 2px;
  overflow:      hidden;
}
.boot-bar {
  height:          100%;
  width:           0%;
  background:      var(--cyan);
  border-radius:   2px;
  animation:       boot-fill 1.4s cubic-bezier(.4, 0, .2, 1) forwards;
  animation-delay: 0.2s;
}

.boot-lines {
  font-size:      10px;
  color:          rgba(0, 170, 255, 0.35);
  letter-spacing: 1px;
  text-align:     left;
  width:          220px;
}
.boot-line { opacity: 0; animation: line-in 0.3s ease forwards; }
.boot-line:nth-child(1) { animation-delay: 0.3s; }
.boot-line:nth-child(2) { animation-delay: 0.7s; }
.boot-line:nth-child(3) { animation-delay: 1.1s; }

/* ── Highlight de sección al navegar desde el topbar ──────────────────────── */
@keyframes section-ping {
  0%   { box-shadow: inset 0 0 0 2px rgba(0,170,255,0),
                     0 0 0 0   rgba(0,170,255,0); }
  15%  { box-shadow: inset 0 0 0 2px rgba(0,170,255,0.7),
                     0 0 8px 2px rgba(0,170,255,0.25); }
  50%  { box-shadow: inset 0 0 0 2px rgba(0,170,255,0.3),
                     0 0 4px 0   rgba(0,170,255,0.1); }
  70%  { box-shadow: inset 0 0 0 2px rgba(0,170,255,0.6),
                     0 0 8px 2px rgba(0,170,255,0.2); }
  100% { box-shadow: inset 0 0 0 2px rgba(0,170,255,0),
                     0 0 0 0   rgba(0,170,255,0); }
}

.section-highlight {
  animation: section-ping 1.6s ease-out forwards;
  border-radius: var(--radius);
  position: relative;
  z-index: 1;
}