/* ============================================================
   COMPONENTS.CSS — Botones · Cards · Cursor · Badge · Chips
   ============================================================ */

.cursor {
  width:            10px;
  height:           10px;
  background:       var(--accent);
  border-radius:    50%;
  position:         fixed;
  pointer-events:   none;
  z-index:          9999;
  transition:       transform 0.1s ease;
  mix-blend-mode:   screen;
}

.cursor-ring {
  width:          36px;
  height:         36px;
  border:         1px solid rgba(25,196,180,0.4);
  border-radius:  50%;
  position:       fixed;
  pointer-events: none;
  z-index:        9998;
  transition:     transform 0.25s ease, width 0.2s, height 0.2s, opacity 0.2s;
}

.logo {
  font-family:     var(--font-display);
  font-weight:     800;
  font-size:       22px;
  letter-spacing:  -0.5px;
  color:           var(--white);
  text-decoration: none;
}

.logo span { color: var(--accent); }

.nav-links a {
  color:          var(--muted);
  text-decoration: none;
  font-size:      13px;
  letter-spacing: 0.5px;
  transition:     color 0.2s;
}

.nav-links a:hover { color: var(--white); }

.nav-cta {
  border:        1px solid rgba(25,196,180,0.3);
  color:         var(--accent) !important;
  padding:       8px 20px;
  border-radius: 100px;
  transition:    background 0.2s, color 0.2s !important;
}

.nav-cta:hover {
  background: var(--accent) !important;
  color:      var(--bg)     !important;
}

.orb {
  position:      absolute;
  border-radius: 50%;
  filter:        blur(80px);
  animation:     float 8s ease-in-out infinite;
}

.orb-1 { width: 500px; height: 500px; right: -80px;  top: -80px;  background: rgba(26,90,255,0.18);  animation-delay: 0s;  }
.orb-2 { width: 350px; height: 350px; right: 200px;  bottom: 0;   background: rgba(15,122,110,0.22); animation-delay: -3s; }
.orb-3 { width: 200px; height: 200px; left: 30%;     top: 30%;    background: rgba(25,196,180,0.1);  animation-delay: -5s; }

.badge {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  background:      rgba(255,255,255,0.06);
  border:          1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  padding:         8px 16px 8px 8px;
  border-radius:   100px;
  font-size:       13px;
  color:           var(--muted);
  margin-bottom:   36px;
  width:           fit-content;
  animation:       fadeUp 0.9s 0.2s cubic-bezier(.16,1,.3,1) both;
}

.badge-dot {
  width:            28px;
  height:           28px;
  background:       linear-gradient(135deg, var(--teal), var(--blue));
  border-radius:    50%;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        14px;
}

.badge-status {
  width:         7px;
  height:        7px;
  background:    var(--accent);
  border-radius: 50%;
  margin-left:   auto;
  box-shadow:    0 0 8px var(--accent);
  animation:     pulse 2s infinite;
}

.hero-title {
  font-family:    var(--font-display);
  font-weight:    800;
  font-size:      clamp(42px, 6vw, 50px);
  line-height:    1.05;
  letter-spacing: -2px;
  margin-bottom:  24px;
  animation:      fadeUp 0.9s 0.35s cubic-bezier(.16,1,.3,1) both;
}

.hero-title .line { display: block; }

.hero-title .accent-word {
  background:              linear-gradient(90deg, var(--teal-light), var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
}

.hero-sub {
  font-size:     17px;
  line-height:   1.7;
  color:         var(--muted);
  max-width:     480px;
  margin-bottom: 48px;
  animation:     fadeUp 0.9s 0.5s cubic-bezier(.16,1,.3,1) both;
}

.hero-actions {
  display:     flex;
  align-items: center;
  gap:         20px;
  animation:   fadeUp 0.9s 0.65s cubic-bezier(.16,1,.3,1) both;
}

.scroll-line {
  width:      40px;
  height:     1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.btn-primary {
  background:     linear-gradient(135deg, var(--teal), var(--blue));
  color:          white;
  text-decoration: none;
  padding:        14px 32px;
  border-radius:  100px;
  font-size:      14px;
  font-weight:    400;
  letter-spacing: 0.3px;
  transition:     transform 0.2s, box-shadow 0.2s;
  box-shadow:     0 0 30px rgba(25,196,180,0.2);
}

.btn-primary:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 40px rgba(25,196,180,0.35);
}

.btn-ghost {
  color:           var(--muted);
  text-decoration: none;
  font-size:       14px;
  display:         flex;
  align-items:     center;
  gap:             8px;
  transition:      color 0.2s;
}

.btn-ghost:hover            { color: var(--white); }
.btn-ghost svg              { transition: transform 0.2s; }
.btn-ghost:hover svg        { transform: translateX(4px); }

.skill-card {
  background:  rgba(255,255,255,0.03);
  border:      1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding:     28px;
  transition:  transform 0.3s, border-color 0.3s, background 0.3s;
  position:    relative;
  overflow:    hidden;
}

.skill-card::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg, rgba(25,196,180,0.05), transparent);
  opacity:    0;
  transition: opacity 0.3s;
}

.skill-card:hover              { transform: translateY(-4px); border-color: rgba(25,196,180,0.2); }
.skill-card:hover::before      { opacity: 1; }

.skill-icon {
  width:           44px;
  height:          44px;
  background:      linear-gradient(135deg, rgba(25,196,180,0.15), rgba(26,90,255,0.15));
  border-radius:   12px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       22px;
  margin-bottom:   20px;
  border:          1px solid rgba(25,196,180,0.15);
}

.skill-name {
  font-family:   var(--font-display);
  font-size:     16px;
  font-weight:   600;
  margin-bottom: 8px;
}

.skill-desc {
  font-size:   13px;
  color:       var(--muted);
  line-height: 1.6;
}

.project-card {
  border-radius: 20px;
  overflow:      hidden;
  position:      relative;
  aspect-ratio:  16 / 10;
  background:    var(--surface);
  border:        1px solid rgba(255,255,255,0.06);
  transition:    transform 0.3s, border-color 0.3s;
  cursor:        pointer;
}

.project-card:hover { transform: scale(1.02); border-color: rgba(25,196,180,0.2); }

.project-bg {
  position:   absolute;
  inset:      0;
  transition: transform 0.5s ease;
}

.project-card:hover .project-bg { transform: scale(1.05); }

.p1 { background: linear-gradient(135deg, #0a1a35 0%, #0f3060 50%, #1a5a90 100%); }
.p2 { background: linear-gradient(135deg, #071a15 0%, #0a3528 60%, #0f5540 100%); }
.p3 { background: linear-gradient(135deg, #1a0f2e 0%, #2d1060 60%, #3d1a80 100%); }

.project-pattern {
  position: absolute;
  inset:    0;
  opacity:  0.1;
}

.project-overlay {
  position:       absolute;
  inset:          0;
  padding:        32px;
  display:        flex;
  flex-direction: column;
  justify-content: flex-end;
  background:     linear-gradient(to top, rgba(5,12,20,0.8) 0%, transparent 60%);
}

.project-tag {
  display:        inline-block;
  background:     rgba(25,196,180,0.15);
  border:         1px solid rgba(25,196,180,0.25);
  color:          var(--accent);
  font-size:      11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding:        4px 12px;
  border-radius:  100px;
  margin-bottom:  12px;
  width:          fit-content;
}

.project-title {
  font-family:   var(--font-display);
  font-size:     22px;
  font-weight:   700;
  margin-bottom: 8px;
}

.project-desc {
  font-size: 13px;
  color:     var(--muted);
}

.about-card {
  position:        absolute;
  background:      rgba(255,255,255,0.04);
  border:          1px solid rgba(255,255,255,0.08);
  border-radius:   20px;
  backdrop-filter: blur(10px);
  padding:         24px;
}

.card-main {
  width:           280px;
  height:          320px;
  left:            50%;
  top:             50%;
  transform:       translate(-50%, -50%);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
}

.avatar-ring {
  width:           96px;
  height:          96px;
  border-radius:   50%;
  background:      linear-gradient(135deg, var(--teal), var(--blue));
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-bottom:   20px;
  font-size:       36px;
  font-family:     var(--font-display);
  font-weight:     800;
}

.card-name {
  font-family:   var(--font-display);
  font-weight:   700;
  font-size:     18px;
  margin-bottom: 6px;
}

.card-role { font-size: 13px; color: var(--muted); }

.card-stat { padding: 16px 20px; border-radius: 14px; }

.stat-num {
  font-family:             var(--font-display);
  font-size:               28px;
  font-weight:             800;
  background:              linear-gradient(90deg, var(--teal-light), var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
}

.stat-label { font-size: 12px; color: var(--muted); }

.card-s1 { bottom: 20px; left:  0; }
.card-s2 { top:    30px; right: 0; }

.about-desc {
  font-size:     16px;
  color:         var(--muted);
  line-height:   1.8;
  margin-bottom: 24px;
}

.chip {
  background:    rgba(255,255,255,0.05);
  border:        1px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  padding:       6px 16px;
  font-size:     12px;
  color:         var(--muted);
  transition:    border-color 0.2s, color 0.2s;
}

.chip:hover { border-color: var(--accent); color: var(--accent); }

.contact-title {
  font-family:    var(--font-display);
  font-size:      clamp(36px, 5vw, 64px);
  font-weight:    800;
  letter-spacing: -2px;
  margin-bottom:  20px;
  position:       relative;
  z-index:        1;
}

.contact-sub {
  color:         var(--muted);
  font-size:     16px;
  margin-bottom: 48px;
  position:      relative;
  z-index:       1;
}

.contact-email {
  display:         inline-block;
  font-family:     var(--font-display);
  font-size:       20px;
  font-weight:     700;
  color:           var(--accent);
  text-decoration: none;
  border-bottom:   1px solid rgba(25,196,180,0.3);
  padding-bottom:  4px;
  position:        relative;
  z-index:         1;
  transition:      border-color 0.2s;
}

.contact-email:hover { border-color: var(--accent); }

.social-links a {
  color:           var(--muted);
  text-decoration: none;
  transition:      color 0.2s;
}

.social-links a:hover { color: var(--accent); }