/* body {
  font-family: var(--font);
  color: var(--text-color);
  background: linear-gradient(160deg, var(--bg-color), var(--1-color));
  min-height: 100vh;
} */

/* ===== LANDING ===== */
#landing {
   position: relative;
   min-height: calc(100vh - 80px);
   display: grid;
   grid-template-columns: 1.4fr 1fr;
   align-items: center;
   gap: 3rem;
   padding: clamp(2rem, 6vw, 6rem);
   overflow: hidden;
   isolation: isolate;
}
/* Resplandores de fondo */
#landing::before,
#landing::after {
   content: "";
   position: absolute;
   z-index: -1;
   width: 38vw;
   height: 38vw;
   border-radius: 50%;
   filter: blur(90px);
   opacity: 0.35;
}
#landing::before {
   background: var(--2-color);
   top: -10%;
   left: -8%;
}
#landing::after {
   background: var(--3-color);
   bottom: -15%;
   right: -8%;
}

#landing .intro h1 {
   font-size: clamp(3rem, 8vw, 6.5rem);
   line-height: 1;
   letter-spacing: -0.03em;
   font-weight: 800;
   background: linear-gradient(90deg, var(--2-color), var(--3-color));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   filter: drop-shadow(0 0 28px rgba(26, 188, 156, 0.35));
}
#landing .intro .role {
   margin-top: 1.25rem;
   font-size: clamp(1.15rem, 2.4vw, 1.6rem);
   font-weight: 300;
}
#landing .intro .bio {
   margin-top: 1rem;
   max-width: 52ch;
   line-height: 1.7;
   opacity: 0.8;
}
#landing .actions {
   margin-top: 2.25rem;
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
}
#landing .btn {
   padding: 0.85rem 1.6rem;
   border-radius: 999px;
   text-decoration: none;
   font-weight: 600;
   color: var(--text-color);
   border: 1px solid rgba(236, 240, 241, 0.25);
   background: rgba(255, 255, 255, 0.06);
   backdrop-filter: blur(10px);
   transition:
      box-shadow 0.25s,
      border-color 0.25s;
}
#landing .btn:hover,
#landing .btn:focus-visible {
   border-color: var(--2-color);
   box-shadow: 0 0 22px rgba(26, 188, 156, 0.55);
   outline: none;
}
#landing .btn.primary {
   background: var(--2-color);
   border-color: var(--2-color);
   color: var(--bg-color);
}
#landing .btn.primary:hover,
#landing .btn.primary:focus-visible {
   box-shadow: 0 0 28px rgba(26, 188, 156, 0.8);
}

/* Panel de cristal */
#landing .status {
   padding: 2rem;
   border-radius: 24px;
   background: rgba(255, 255, 255, 0.07);
   border: 1px solid rgba(255, 255, 255, 0.15);
   backdrop-filter: blur(18px);
   box-shadow:
      0 20px 50px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
#landing .availability {
   display: flex;
   align-items: center;
   gap: 0.7rem;
   font-weight: 600;
}
#landing .dot {
   width: 0.7rem;
   height: 0.7rem;
   border-radius: 50%;
   background: var(--2-color);
   box-shadow: 0 0 0 0 rgba(26, 188, 156, 0.7);
   animation: pulse 2.2s infinite;
}
@keyframes pulse {
   70% {
      box-shadow: 0 0 0 12px rgba(26, 188, 156, 0);
   }
   100% {
      box-shadow: 0 0 0 0 rgba(26, 188, 156, 0);
   }
}
#landing dl {
   margin-top: 1.5rem;
   display: grid;
   gap: 1.1rem;
}
#landing dt {
   font-size: 0.85rem;
   opacity: 0.6;
}
#landing dd {
   margin-top: 0.15rem;
   font-size: 1.05rem;
}
#landing .tags {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin-top: 0.4rem;
}
#landing .tags span {
   padding: 0.25rem 0.75rem;
   border-radius: 999px;
   font-size: 0.9rem;
   border: 1px solid rgba(213, 62, 227, 0.5);
   background: rgba(213, 62, 227, 0.12);
}