:root{
  --bg:#0a0a0f;
  --fg:#f5f5f7;
  --muted:#8b8b96;
  --accent:#ffb627;
  --accent-2:#ff5e3a;
  --border:rgba(255,255,255,0.08);
}

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

html, body{
  height:100%;
  font-family:'Space Grotesk', sans-serif;
  background:var(--bg);
  color:var(--fg);
  overflow-x:hidden;
}

/* ===== Fondo ===== */
.bg-grid{
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(255,182,39,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,182,39,0.06) 1px, transparent 1px);
  background-size:60px 60px;
  transform:perspective(500px) rotateX(60deg) translateY(-10%) scale(1.5);
  transform-origin:center top;
  mask-image:radial-gradient(ellipse at center, black 0%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at center, black 0%, transparent 70%);
  z-index:0;
  pointer-events:none;
  animation:gridMove 20s linear infinite;
}
@keyframes gridMove{
  0%{background-position:0 0, 0 0}
  100%{background-position:60px 60px, 60px 60px}
}

.blob{
  position:fixed;
  border-radius:50%;
  filter:blur(80px);
  opacity:0.35;
  z-index:0;
  pointer-events:none;
}
.blob-1{ width:500px; height:500px; background:var(--accent); top:-150px; left:-100px; animation:float1 14s ease-in-out infinite;}
.blob-2{ width:450px; height:450px; background:var(--accent-2); bottom:-150px; right:-100px; animation:float2 18s ease-in-out infinite;}

@keyframes float1{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(60px,80px)} }
@keyframes float2{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(-80px,-60px)} }

#particles{ position:fixed; inset:0; z-index:1; pointer-events:none; }

/* ===== Main ===== */
main{
  position:relative; z-index:5;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:40px 24px;
}

.hero{
  max-width:640px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ===== Engranaje ===== */
.gear-wrap{
  position:relative;
  width:100px; height:100px;
  margin-bottom:32px;
}
.gear-wrap .halo{
  position:absolute; inset:-30px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,182,39,0.35), transparent 65%);
  filter:blur(10px);
  animation:haloPulse 4s ease-in-out infinite;
}
@keyframes haloPulse{ 0%,100%{opacity:0.6; transform:scale(1)} 50%{opacity:1; transform:scale(1.1)} }

.gear-wrap .gear{
  position:relative; z-index:2;
  width:100%; height:100%;
  color:var(--accent);
  font-size:4rem;
  display:flex; align-items:center; justify-content:center;
  animation:spin 8s linear infinite;
  filter: drop-shadow(0 0 12px rgba(255,182,39,0.4));
}
.gear-wrap .gear-2{
  position:absolute; top:5px; right:-10px;
  width:40px; height:40px;
  color:var(--accent-2);
  font-size:1.6rem;
  display:flex; align-items:center; justify-content:center;
  animation:spin 5s linear infinite reverse;
  filter: drop-shadow(0 0 8px rgba(255,94,58,0.5));
}
@keyframes spin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* ===== Textos ===== */
.badge-tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px;
  border:1px solid var(--accent);
  border-radius:999px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--accent);
  background:rgba(255,182,39,0.06);
  margin-bottom:24px;
}

h1.title{
  font-size:clamp(2.4rem, 6vw, 4rem);
  line-height:1.05;
  font-weight:700;
  letter-spacing:-0.02em;
  margin-bottom:20px;
}
h1.title .accent{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
h1.title .strike{
  position:relative;
  color:var(--muted);
  font-weight:300;
}
h1.title .strike::after{
  content:'';
  position:absolute; left:0; right:0; top:50%;
  height:2px;
  background:var(--accent-2);
  transform:scaleX(0);
  transform-origin:left;
  animation:strikeIn 1s 0.4s forwards;
}
@keyframes strikeIn{ to{transform:scaleX(1)} }

p.subtitle{
  font-size:1.1rem;
  color:var(--muted);
  line-height:1.6;
  max-width:480px;
  margin-bottom:36px;
}

/* ===== Botón ===== */
.btn-cv{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 32px;
  border:none;
  border-radius:12px;
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:1rem;
  color:#0a0a0f;
  text-decoration:none;
  cursor:pointer;
  overflow:hidden;
  transition:transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow:0 8px 30px rgba(255,182,39,0.25);
}
.btn-cv-bg{
  position:absolute; inset:0;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  z-index:0;
}
.btn-cv-bg::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg, var(--accent-2), var(--accent));
  opacity:0;
  transition:opacity 0.3s ease;
}
.btn-cv:hover{ transform:translateY(-2px); box-shadow:0 14px 40px rgba(255,94,58,0.4); }
.btn-cv:hover .btn-cv-bg::before{ opacity:1; }
.btn-cv:active{ transform:translateY(0); }

.btn-cv-content{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:10px;
}
.btn-cv-content i{ font-size:1.1rem; }

.btn-cv::after{
  content:'';
  position:absolute; top:0; left:-100%;
  width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  z-index:2;
  animation:shimmer 3.5s infinite;
}
@keyframes shimmer{
  0%{ left:-100% }
  60%,100%{ left:130% }
}

/* ===== Toast ===== */
.toast{
  position:fixed;
  bottom:24px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:rgba(18,18,26,0.95);
  border:1px solid var(--accent);
  color:var(--fg);
  padding:14px 22px;
  border-radius:12px;
  font-size:0.9rem;
  display:flex; align-items:center; gap:10px;
  opacity:0;
  pointer-events:none;
  transition:all 0.3s ease;
  z-index:1000;
  box-shadow:0 20px 40px rgba(0,0,0,0.5);
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.toast i{ color:var(--accent); }

/* A11y: reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}