/* ===================================================================
   PULSO DIGITAL · estilos
   Paleta tomada del logo: cian -> azul -> violeta sobre fondo oscuro
=================================================================== */
:root{
  --cyan:#29d3f5;
  --blue:#3b6fe0;
  --violet:#8b3fe4;
  --magenta:#b14bff;
  --bg:#05060f;
  --bg-2:#0a0b1a;
  --panel:rgba(18,20,40,.55);
  --line:rgba(120,150,255,.16);
  --text:#eaf2ff;
  --muted:#9aa6c8;
  --grad: linear-gradient(120deg,var(--cyan),var(--blue) 45%,var(--violet) 80%,var(--magenta));
  --grad-soft: linear-gradient(120deg,rgba(41,211,245,.18),rgba(139,63,228,.18));
  --glow-cyan: 0 0 18px rgba(41,211,245,.55);
  --glow-violet: 0 0 22px rgba(139,63,228,.55);
  --r: 18px;
  --maxw: 1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Space Grotesk',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  line-height:1.6;
  cursor:default;
}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:rgba(139,63,228,.45);color:#fff}

/* ===== Fondos / canvas ===== */
#matrix-canvas,#three-canvas{
  position:fixed;inset:0;width:100%;height:100%;z-index:-3;
}
#three-canvas{z-index:-2}
.grid-overlay{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(rgba(120,150,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,150,255,.05) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(circle at 50% 35%,#000 0%,transparent 75%);
  -webkit-mask-image:radial-gradient(circle at 50% 35%,#000 0%,transparent 75%);
}
.noise-overlay{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.04;
  background-image:radial-gradient(circle at center,#fff 0 1px,transparent 1px);
  background-size:3px 3px;mix-blend-mode:overlay;
}
body::before{ /* halo de color que vive sobre el fondo */
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(45vw 45vw at 15% 15%,rgba(41,211,245,.10),transparent 60%),
    radial-gradient(50vw 50vw at 85% 80%,rgba(139,63,228,.12),transparent 60%);
}

/* ===== Cursor glow ===== */
#cursor-glow{
  position:fixed;top:0;left:0;width:380px;height:380px;border-radius:50%;
  margin:-190px 0 0 -190px;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(59,111,224,.18),transparent 60%);
  transition:opacity .3s;opacity:0;
}

/* ===== Métricas flotantes ===== */
.floating-metrics{position:fixed;inset:0;z-index:-1;pointer-events:none}
.metric-chip{
  position:absolute;left:var(--x);top:var(--y);
  font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.5px;
  padding:6px 12px;border:1px solid var(--line);border-radius:999px;
  color:var(--cyan);background:rgba(8,10,24,.5);backdrop-filter:blur(4px);
  box-shadow:var(--glow-cyan);opacity:.0;
  animation:floatChip 9s var(--d) ease-in-out infinite;
}
.metric-chip:nth-child(even){color:var(--magenta);box-shadow:var(--glow-violet)}
@keyframes floatChip{
  0%,100%{opacity:0;transform:translateY(14px)}
  15%,85%{opacity:.85}
  50%{transform:translateY(-14px)}
}

/* ===== Loader ===== */
#loader{
  position:fixed;inset:0;z-index:9999;display:grid;place-content:center;justify-items:center;gap:22px;
  background:var(--bg);transition:opacity .7s,visibility .7s;
}
#loader.hidden{opacity:0;visibility:hidden}
.loader-logo{position:relative;width:170px;display:grid;place-items:center}
.loader-logo img{
  width:130px;
  filter:drop-shadow(0 0 22px rgba(41,211,245,.55)) drop-shadow(0 0 46px rgba(139,63,228,.4));
  animation:heartbeat 1.4s ease-in-out infinite, logoIn .9s ease-out both;
}
@keyframes logoIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes heartbeat{
  0%,100%{transform:scale(1)}
  12%{transform:scale(1.07)}
  22%{transform:scale(1)}
  34%{transform:scale(1.05)}
  46%{transform:scale(1)}
}
.loader-logo .ecg{
  position:absolute;left:50%;top:50%;width:200%;height:74px;
  transform:translate(-50%,-50%);opacity:.95;pointer-events:none;
}
.loader-logo .ecg polyline{
  fill:none;stroke:url(#ecgGrad);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(41,211,245,.9));
  stroke-dasharray:340;stroke-dashoffset:340;
  animation:ecgDraw 1.6s linear infinite;
}
@keyframes ecgDraw{
  0%{stroke-dashoffset:340}
  70%{stroke-dashoffset:0}
  100%{stroke-dashoffset:-340}
}
.loader-text{font-family:'Orbitron',sans-serif;letter-spacing:5px;color:var(--muted);font-size:.8rem;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.dots::after{content:"";animation:dots 1.4s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* ===== Warp flash (al navegar) ===== */
body.warping::after{
  content:"";position:fixed;inset:0;z-index:800;pointer-events:none;
  background:linear-gradient(120deg,rgba(41,211,245,.10),rgba(139,63,228,.12));
  animation:warpFlash .6s ease-out forwards;
}
@keyframes warpFlash{
  0%{opacity:.9;backdrop-filter:blur(2px)}
  100%{opacity:0;backdrop-filter:blur(0)}
}

/* ===== Scroll progress ===== */
#scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:1000;
  background:var(--grad);box-shadow:var(--glow-cyan);
}

/* ===== Navbar ===== */
#navbar{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(18px,5vw,48px);
  transition:background .4s,padding .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
#navbar.scrolled{
  background:rgba(5,6,15,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);padding-top:12px;padding-bottom:12px;
}
.nav-logo{display:flex;align-items:center;gap:12px;font-family:'Orbitron',sans-serif;font-weight:700;letter-spacing:1px}
.nav-logo img{width:38px;height:38px;filter:drop-shadow(0 0 8px rgba(41,211,245,.6))}
.nav-logo span{font-size:1.05rem}
.nav-logo b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-links a{
  position:relative;padding:8px 14px;border-radius:10px;font-size:.92rem;color:var(--muted);
  transition:color .25s,background .25s;
}
.nav-links a:hover{color:#fff}
.nav-links a:not(.nav-cta)::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .3s;border-radius:2px;
}
.nav-links a:not(.nav-cta):hover::after{transform:scaleX(1)}
.nav-cta{
  background:var(--grad);color:#fff!important;font-weight:600;
  box-shadow:var(--glow-violet);
}
.nav-cta:hover{filter:brightness(1.12)}
#nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
#nav-toggle span{width:26px;height:2px;background:var(--text);border-radius:2px;transition:.3s}
#nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#nav-toggle.open span:nth-child(2){opacity:0}
#nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== Layout secciones ===== */
.section{
  position:relative;z-index:1;
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(80px,12vh,140px) clamp(18px,5vw,48px);
}
.section-head{margin-bottom:clamp(34px,5vw,56px);max-width:760px}
.kicker{
  font-family:'JetBrains Mono',monospace;font-size:.8rem;letter-spacing:2px;
  color:var(--cyan);text-transform:uppercase;display:inline-block;margin-bottom:14px;
}
.section-head h2{
  font-family:'Orbitron',sans-serif;font-weight:700;line-height:1.12;
  font-size:clamp(1.8rem,4.5vw,3.1rem);
}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ===== HERO ===== */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;max-width:none;padding-top:120px}
.hero-inner{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:880px}
.hero-badge{
  font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:4px;color:var(--cyan);
  padding:8px 18px;border:1px solid var(--line);border-radius:999px;background:rgba(8,10,24,.4);
  box-shadow:var(--glow-cyan);
}
.hero-logo{position:relative;width:clamp(150px,26vw,230px);margin:8px 0}
.hero-logo img{animation:floatLogo 6s ease-in-out infinite, heroGlow 2.4s ease-in-out infinite}
@keyframes floatLogo{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-14px) rotate(.5deg)}}
@keyframes heroGlow{
  0%,100%{filter:drop-shadow(0 0 22px rgba(41,211,245,.45)) drop-shadow(0 0 44px rgba(139,63,228,.3))}
  50%{filter:drop-shadow(0 0 36px rgba(41,211,245,.85)) drop-shadow(0 0 74px rgba(139,63,228,.55))}
}
.pulse-line{
  position:absolute;left:50%;top:50%;width:130%;height:2px;transform:translate(-50%,-50%);
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.5;
  animation:scanline 3s ease-in-out infinite;
}
@keyframes scanline{0%,100%{transform:translate(-50%,-120%);opacity:0}50%{transform:translate(-50%,-50%);opacity:.7}}
.hero-title{font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(2.4rem,9vw,6rem);line-height:1;letter-spacing:2px}
.glitch{position:relative;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;inset:0;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.glitch::before{animation:glitch1 3.5s infinite steps(2);clip-path:inset(0 0 55% 0);opacity:.8}
.glitch::after{animation:glitch2 2.8s infinite steps(2);clip-path:inset(55% 0 0 0);opacity:.8}
@keyframes glitch1{0%,92%,100%{transform:translate(0)}93%{transform:translate(-3px,-2px)}96%{transform:translate(2px,1px)}}
@keyframes glitch2{0%,90%,100%{transform:translate(0)}94%{transform:translate(3px,2px)}97%{transform:translate(-2px,-1px)}}
.hero-tagline{font-size:clamp(1.1rem,2.8vw,1.7rem);font-weight:500;color:#dce6ff}
.hero-sub{color:var(--muted);max-width:560px;font-size:1.02rem}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:14px}

/* Botones */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;border-radius:999px;font-weight:600;font-size:.98rem;letter-spacing:.3px;
  cursor:pointer;border:1px solid transparent;transition:transform .25s,box-shadow .25s,filter .25s;overflow:hidden;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--glow-violet)}
.btn-primary:hover{transform:translateY(-3px);filter:brightness(1.1);box-shadow:0 0 30px rgba(139,63,228,.7)}
.btn-ghost{background:rgba(255,255,255,.03);border-color:var(--line);color:#dbe5ff}
.btn-ghost:hover{transform:translateY(-3px);border-color:var(--cyan);box-shadow:var(--glow-cyan)}
.btn.full{width:100%;justify-content:center}

/* Scroll hint */
.scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted)}
.scroll-hint span{width:24px;height:38px;border:2px solid var(--line);border-radius:14px;position:relative}
.scroll-hint span::before{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;background:var(--cyan);border-radius:2px;transform:translateX(-50%);animation:wheel 1.6s infinite;box-shadow:var(--glow-cyan)}
@keyframes wheel{0%{opacity:1;top:7px}100%{opacity:0;top:20px}}
.scroll-hint small{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:2px}

/* ===== Reveal animation ===== */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ===== ABOUT ===== */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,60px);align-items:center}
.about-text p{color:var(--muted);margin-bottom:16px;font-size:1.05rem}
.about-text strong{color:#fff}
.about-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.about-tags span{font-family:'JetBrains Mono',monospace;font-size:.8rem;padding:7px 14px;border:1px solid var(--line);border-radius:999px;color:var(--cyan);background:rgba(8,10,24,.4)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.stat{
  padding:24px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);backdrop-filter:blur(8px);text-align:center;
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.stat:hover{transform:translateY(-6px);border-color:var(--violet);box-shadow:var(--glow-violet)}
.stat b{font-family:'Orbitron',sans-serif;font-size:clamp(1.8rem,4vw,2.6rem);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:block}
.stat span{color:var(--muted);font-size:.86rem}

/* ===== SERVICES ===== */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.card{
  position:relative;padding:30px 26px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);backdrop-filter:blur(10px);overflow:hidden;
  transition:transform .3s,border-color .3s,box-shadow .3s;transform-style:preserve-3d;
}
.card:hover{border-color:rgba(139,63,228,.5);box-shadow:0 18px 50px rgba(0,0,0,.45),var(--glow-violet)}
.card-icon{font-size:2.2rem;margin-bottom:14px;filter:drop-shadow(0 0 10px rgba(41,211,245,.5))}
.card h3{font-family:'Orbitron',sans-serif;font-size:1.15rem;margin-bottom:10px;font-weight:700}
.card p{color:var(--muted);font-size:.96rem;margin-bottom:16px}
.card ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.card li{position:relative;padding-left:20px;font-size:.9rem;color:#cdd8f5}
.card li::before{content:"▹";position:absolute;left:0;color:var(--cyan)}
.card-glow{
  position:absolute;width:200px;height:200px;border-radius:50%;top:-60px;right:-60px;
  background:radial-gradient(circle,rgba(139,63,228,.3),transparent 70%);
  opacity:0;transition:opacity .4s;pointer-events:none;
}
.card:hover .card-glow{opacity:1}

/* ===== PROCESS / TIMELINE ===== */
.timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.step{
  position:relative;padding:28px 24px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);backdrop-filter:blur(8px);transition:transform .3s,border-color .3s,box-shadow .3s;
}
.step:hover{transform:translateY(-6px);border-color:var(--cyan);box-shadow:var(--glow-cyan)}
.step-n{font-family:'Orbitron',sans-serif;font-size:2.4rem;font-weight:900;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin-bottom:10px}
.step h3{font-size:1.1rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:.92rem}

/* ===== CONTACT ===== */
.contact-lead{color:var(--muted);margin-top:14px}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,46px);align-items:start}
.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-card{
  display:flex;flex-direction:column;gap:6px;padding:22px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);backdrop-filter:blur(8px);transition:transform .3s,border-color .3s,box-shadow .3s;
}
.contact-card:hover{transform:translateY(-6px);border-color:var(--violet);box-shadow:var(--glow-violet)}
.cc-icon{font-size:1.6rem;color:var(--cyan)}
.cc-label{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:2px;color:var(--muted);text-transform:uppercase}
.cc-value{font-weight:600;font-size:1rem;word-break:break-word}

.contact-form{display:flex;flex-direction:column;gap:18px;padding:30px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);backdrop-filter:blur(10px)}
.field{position:relative}
.field input,.field textarea{
  width:100%;padding:16px 14px 8px;background:rgba(8,10,24,.5);border:1px solid var(--line);border-radius:12px;
  color:var(--text);font-family:inherit;font-size:1rem;resize:vertical;transition:border-color .25s,box-shadow .25s;
}
.field textarea{padding-top:18px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:var(--glow-cyan)}
.field label{
  position:absolute;left:14px;top:14px;color:var(--muted);font-size:1rem;pointer-events:none;transition:.2s;
}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{
  top:5px;font-size:.7rem;color:var(--cyan);letter-spacing:1px;
}
.form-note{font-size:.9rem;min-height:1.2em;text-align:center}
.form-note.ok{color:var(--cyan)}
.form-note.err{color:#ff6b8b}

/* ===== FOOTER ===== */
.footer{position:relative;z-index:1;border-top:1px solid var(--line);background:rgba(5,6,15,.7);backdrop-filter:blur(10px);margin-top:40px}
.footer-inner{max-width:var(--maxw);margin:0 auto;padding:48px clamp(18px,5vw,48px);display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:center}
.footer-brand{display:flex;align-items:center;gap:14px}
.footer-brand img{width:46px;filter:drop-shadow(0 0 10px rgba(41,211,245,.5))}
.footer-brand p{color:var(--muted)}
.footer-nav{display:flex;flex-wrap:wrap;gap:18px}
.footer-nav a{color:var(--muted);font-size:.92rem;transition:color .25s}
.footer-nav a:hover{color:var(--cyan)}
.footer-bottom{text-align:center;padding:18px;border-top:1px solid var(--line);color:var(--muted);font-size:.82rem}

/* ===== Responsive ===== */
@media (max-width:860px){
  .about-grid,.contact-grid{grid-template-columns:1fr}
  .nav-links{
    position:fixed;inset:0 0 0 auto;width:min(80vw,320px);flex-direction:column;align-items:stretch;gap:6px;
    background:rgba(8,10,24,.96);backdrop-filter:blur(18px);padding:90px 24px 24px;
    transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.7,.2,1);border-left:1px solid var(--line);
  }
  .nav-links.open{transform:translateX(0)}
  .nav-links a{padding:14px 16px;font-size:1.05rem}
  #nav-toggle{display:flex;z-index:901}
}
@media (max-width:520px){
  .stats,.contact-cards{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}