/* VOLTYA — Sistema visual dark / bento / electric */
:root{
  --bg:#0a0b0a;
  --bg-2:#111312;
  --surface:#15181a;
  --surface-2:#1c1f22;
  --border:#262a2e;
  --text:#f1f3ef;
  --mute:#8a8f8a;
  --volt:#d8ff3a;   /* amarillo eléctrico */
  --volt-2:#b4f000;
  --warn:#ff4d2e;
}

*{ box-sizing:border-box; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
html,body{ background:var(--bg); color:var(--text); }
html{ scroll-behavior:smooth; }

body{
  font-family:'Space Grotesk', system-ui, sans-serif;
  font-feature-settings:"ss01","ss02";
  background-image:
    radial-gradient(800px 500px at 85% -10%, #d8ff3a14, transparent 60%),
    radial-gradient(700px 500px at -10% 90%, #ffffff08, transparent 60%);
  background-attachment:fixed;
}

.font-mono{ font-family:'Space Mono', ui-monospace, monospace; }
.font-display{ font-family:'Space Grotesk', sans-serif; letter-spacing:-0.035em; }

/* Cards bento */
.bento{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:28px;
  position:relative;
  overflow:hidden;
}
.bento-soft{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:28px;
}
.bento-volt{
  background:var(--volt);
  color:#0a0b0a;
  border-radius:28px;
  position:relative;
  overflow:hidden;
}
.bento-outline{
  background:transparent;
  border:1px dashed #ffffff22;
  border-radius:28px;
}

/* Pills */
.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .75rem; border-radius:999px;
  font-family:'Space Mono', monospace; font-size:.7rem;
  background:#ffffff10; border:1px solid #ffffff18; color:#cfd3cd;
  text-transform:uppercase; letter-spacing:.08em;
}
.pill-volt{
  background:var(--volt); color:#0a0b0a; border:1px solid var(--volt);
}
.pill-dot{ width:.4rem; height:.4rem; border-radius:999px; background:var(--volt); box-shadow:0 0 0 4px #d8ff3a22; animation:blink 1.6s ease-in-out infinite; }
@keyframes blink{ 50%{opacity:.35} }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.4rem; border-radius:999px;
  font-weight:500; font-size:.9rem;
  transition:transform .3s ease, background .3s ease, color .3s ease;
}
.btn-volt{ background:var(--volt); color:#0a0b0a; }
.btn-volt:hover{ background:#e7ff66; transform:translateY(-2px); }
.btn-volt svg{ transition:transform .3s ease; }
.btn-volt:hover svg{ transform:translate(2px,-2px); }

.btn-ghost{ background:#ffffff08; color:var(--text); border:1px solid var(--border); }
.btn-ghost:hover{ background:#ffffff14; }

.btn-dark{ background:#0a0b0a; color:#f1f3ef; }

/* Nav floating pill */
.nav-pill{
  background:#0d0f0eee;
  border:1px solid var(--border);
  border-radius:999px;
  backdrop-filter:blur(14px);
}

/* Marquee */
.marq{ display:flex; gap:3rem; animation:marq 42s linear infinite; }
@keyframes marq{ to{ transform:translateX(-50%);} }

/* Glow text */
.glow{ text-shadow:0 0 24px #d8ff3a40, 0 0 60px #d8ff3a20; }

/* Big hero title */
.h-massive{
  font-size:clamp(2.5rem, 9vw, 8rem);
  line-height:.95;
  letter-spacing:-0.045em;
  font-weight:500;
}

/* Service card */
.svc{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:28px;
  padding:1.5rem;
  transition:transform .35s ease, border-color .35s ease, background .35s ease;
  position:relative; overflow:hidden;
}
.svc:hover{ transform:translateY(-4px); border-color:var(--volt); }
.svc .arrow{ transition:transform .35s ease, color .35s ease; }
.svc:hover .arrow{ color:var(--volt); transform:translate(4px,-4px); }
.svc .icon{
  width:44px; height:44px; border-radius:14px;
  background:#ffffff0a; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--volt);
}

/* Stat number */
.stat{ font-feature-settings:"tnum"; font-variant-numeric:tabular-nums; }

/* Reveal */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }

/* Reveal staggered */
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }

/* Inputs */
.field{
  background:#0d0f0e; border:1px solid var(--border);
  border-radius:18px; padding:1rem 1.1rem; color:var(--text);
  width:100%; transition:border-color .3s ease, background .3s ease;
}
.field:focus{ outline:none; border-color:var(--volt); background:#10120f; }
.field::placeholder{ color:#6c706b; }

/* WhatsApp float */
.wa{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:60;
  width:62px; height:62px; border-radius:24px;
  background:var(--volt); color:#0a0b0a;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 40px #d8ff3a30, 0 4px 20px #00000060;
  transition:transform .35s ease;
  transform:rotate(-3deg);
}
.wa:hover{ transform:rotate(0) scale(1.06); }
.wa::after{
  content:""; position:absolute; inset:-8px; border-radius:28px;
  border:1px solid #d8ff3a55; animation:ringy 2.4s ease-out infinite;
}
@keyframes ringy{
  0%{ transform:scale(.85); opacity:.8; }
  100%{ transform:scale(1.3); opacity:0; }
}

/* Mobile menu */
.mob{
  position:fixed; inset:0; z-index:90;
  background:#0a0b0aeb; backdrop-filter:blur(20px);
  transform:translateY(-110%); transition:transform .55s cubic-bezier(.7,0,.2,1);
}
.mob.open{ transform:translateY(0); }

/* Marquee tag */
.tag-row{ font-family:'Space Mono', monospace; font-size:1.5rem; letter-spacing:-.01em; }

/* Image with grain */
.img-volt{
  filter:saturate(.6) contrast(1.05);
}
.img-grayscale{ filter:grayscale(1) contrast(1.05) brightness(.92); }

/* Spark icon spinner */
.spark{ display:inline-block; transition:transform .5s ease; }
.spark.s{ animation:spin 8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }

/* Brand glyph */
.glyph-bolt{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px;
  background:var(--volt); color:#0a0b0a;
  box-shadow:0 0 0 4px #d8ff3a15;
}

/* Section heading */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Space Mono', monospace; font-size:.75rem;
  text-transform:uppercase; letter-spacing:.18em; color:var(--mute);
}
.eyebrow::before{
  content:""; width:24px; height:1px; background:var(--volt);
}

/* Card hover glow */
.glow-hover{ transition:box-shadow .4s ease; }
.glow-hover:hover{ box-shadow:0 0 0 1px var(--volt), 0 20px 60px #d8ff3a18; }

/* Diagonal stripes */
.stripes{
  background-image: repeating-linear-gradient(135deg, #d8ff3a 0 6px, #0a0b0a 6px 14px);
}

/* Dotted bg */
.dotted{
  background-image: radial-gradient(#ffffff15 1px, transparent 1px);
  background-size: 18px 18px;
}

/* Step number giant */
.step-num{
  font-family:'Space Grotesk', sans-serif;
  font-size:5rem; line-height:1; letter-spacing:-0.05em;
  -webkit-text-stroke:1px #ffffff60; color:transparent;
}

/* Border-yellow on focus reviews */
.review{
  background:var(--surface); border:1px solid var(--border);
  border-radius:24px; padding:1.5rem;
  transition:border-color .3s ease, transform .3s ease;
}
.review:hover{ border-color:var(--volt); transform:translateY(-3px); }

/* Footer giant */
.footer-mark{
  font-size:clamp(4rem, 18vw, 18rem);
  font-weight:500; letter-spacing:-0.06em;
  line-height:.85;
  color:transparent;
  -webkit-text-stroke:1px #ffffff20;
}
.footer-mark .bolt{
  -webkit-text-stroke:0; color:var(--volt);
  display:inline-block; transform:translateY(-.04em);
}