/* ============================================================================
   DexFact IT — main.css
   Sistema de diseño futurista. Paleta y tipografías tomadas de la identidad
   DexFact (cyan/naranja sobre navy profundo; Orbitron/Exo 2/Rajdhani).
   Autor: Dexter Machado — DexFact IT · Lab & Consulting
   ========================================================================== */
:root{
  --bg:#060b18; --bg2:#0a1224; --card:#0f1e35; --card2:#12233f;
  --border:#1b3260; --border2:#244a86;
  --text:#c8d8f0; --white:#e8f0ff; --muted:#7f93b8;
  --cyan:#00d4ff; --orange:#ff6b35; --gold:#ffd700; --green:#00ff9d; --purple:#9b59ff;
  --grad:linear-gradient(90deg,var(--orange),var(--cyan));
  --grad-soft:linear-gradient(135deg,rgba(0,212,255,.14),rgba(255,107,53,.14));
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --radius:16px; --maxw:1180px;
  --font-display:'Orbitron',sans-serif;
  --font-head:'Exo 2',sans-serif;
  --font-body:'Rajdhani',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body); background:var(--bg); color:var(--text);
  line-height:1.6; overflow-x:hidden; min-height:100vh; position:relative;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-head);color:var(--white);line-height:1.1;letter-spacing:.3px}
.grad{
  background:linear-gradient(90deg,var(--orange),var(--cyan),var(--orange));
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:gradShift 7s linear infinite;
}
@keyframes gradShift{to{background-position:200% center}}

/* ---------- Fondo cinematográfico multicapa ---------- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg>*{position:absolute;inset:0}
.bg-base{
  background:
    radial-gradient(1200px 820px at 50% -12%,#0b1a38 0%,transparent 60%),
    radial-gradient(1000px 760px at 100% 0%,#0a1330 0%,transparent 55%),
    linear-gradient(180deg,#070d1c 0%,#05070f 100%);
}
.bg-aurora{
  background:
    radial-gradient(38% 44% at 18% 20%,rgba(0,212,255,.30),transparent 70%),
    radial-gradient(42% 46% at 84% 12%,rgba(255,107,53,.26),transparent 72%),
    radial-gradient(52% 56% at 62% 96%,rgba(155,89,255,.22),transparent 72%);
  animation:auroraDrift 22s ease-in-out infinite alternate;will-change:transform;
}
.bg-aurora::before{
  content:"";position:absolute;inset:-25%;
  background:radial-gradient(30% 34% at 70% 42%,rgba(0,255,157,.16),transparent 70%);
  animation:auroraDrift2 30s ease-in-out infinite alternate;
}
@keyframes auroraDrift{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.1)}}
@keyframes auroraDrift2{from{transform:translate3d(4%,3%,0) scale(1.06)}to{transform:translate3d(-4%,-3%,0) scale(1)}}
.bg-grid{
  background-image:
    linear-gradient(rgba(0,212,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,212,255,.06) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 92% 62% at 50% 0%,#000 28%,transparent 76%);
  mask-image:radial-gradient(ellipse 92% 62% at 50% 0%,#000 28%,transparent 76%);
  animation:gridDrift 22s linear infinite;
}
@keyframes gridDrift{to{background-position:0 -48px,0 0}}
.bg-stars{
  background-image:
    radial-gradient(1.5px 1.5px at 12% 24%,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(1.5px 1.5px at 84% 18%,rgba(0,212,255,.6),transparent 60%),
    radial-gradient(1px 1px at 46% 60%,rgba(255,255,255,.5),transparent 60%),
    radial-gradient(1.5px 1.5px at 68% 78%,rgba(255,107,53,.55),transparent 60%),
    radial-gradient(1px 1px at 28% 86%,rgba(255,255,255,.45),transparent 60%),
    radial-gradient(1px 1px at 92% 52%,rgba(255,255,255,.4),transparent 60%),
    radial-gradient(1px 1px at 56% 34%,rgba(0,212,255,.45),transparent 60%);
  opacity:.7;animation:starFloat 26s ease-in-out infinite alternate;
}
@keyframes starFloat{from{transform:translateY(0)}to{transform:translateY(-20px)}}
.bg-vignette{background:radial-gradient(125% 95% at 50% 28%,transparent 52%,rgba(2,4,10,.62) 100%)}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(16px,4vw,40px); background:rgba(6,11,24,.72);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  display:grid;place-items:center;width:40px;height:40px;border-radius:10px;
  font-family:var(--font-display);font-weight:900;color:#04101f;
  background:var(--grad); box-shadow:0 0 22px rgba(0,212,255,.4);
}
.brand-mark.small{width:34px;height:34px;font-size:.8rem}
.brand-text{font-family:var(--font-display);font-size:1.15rem;color:var(--white);letter-spacing:1px}
.brand-text strong{color:var(--cyan)}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-links a{padding:9px 16px;border-radius:10px;color:var(--text);font-weight:600;transition:.2s}
.nav-links a:hover{color:var(--white);background:rgba(255,255,255,.05)}
.nav-cta{background:var(--grad);color:#04101f !important;font-weight:700}
.nav-cta:hover{filter:brightness(1.08)}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:12px;font-family:var(--font-head);font-weight:700;
  font-size:1rem;cursor:pointer;border:1px solid transparent;transition:.2s;
}
.btn-primary{background:var(--grad);color:#04101f;box-shadow:0 10px 30px rgba(255,107,53,.28)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,212,255,.32)}
.btn-ghost{border-color:var(--border2);color:var(--white);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-block{width:100%;margin-top:8px}

/* ---------- Layout ---------- */
main{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,40px)}
section{padding:clamp(34px,4.5vw,58px) 0}
.section-head{text-align:center;max-width:640px;margin:0 auto 28px}
.section-head h2{font-size:clamp(1.9rem,5vw,2.8rem)}
.section-head p{color:var(--muted);margin-top:10px;font-size:1.1rem}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,4vw,48px);align-items:center;
      padding:clamp(28px,4vw,52px) 0 clamp(18px,3vw,32px)}
.eyebrow{font-family:var(--font-display);letter-spacing:2px;text-transform:uppercase;
         font-size:.72rem;color:var(--cyan);margin-bottom:16px}
.hero h1{font-family:var(--font-display);font-weight:900;font-size:clamp(2.8rem,8vw,5rem);
         color:var(--white);text-shadow:0 0 40px rgba(0,212,255,.25)}
.lead{font-size:clamp(1.05rem,2.4vw,1.3rem);color:var(--text);margin:22px 0 30px;max-width:560px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{list-style:none;display:flex;gap:14px;margin-top:24px;flex-wrap:wrap}
.hero-stats li{background:var(--card);border:1px solid var(--border);border-radius:12px;
               padding:12px 18px;display:flex;flex-direction:column}
.hero-stats b{color:var(--white);font-family:var(--font-head)}
.hero-stats span{color:var(--muted);font-size:.85rem}

/* Foto */
.hero-photo{position:relative;display:grid;place-items:center}
.photo-frame{
  position:relative;width:min(420px,80vw);aspect-ratio:1;border-radius:24px;overflow:hidden;
  border:1px solid var(--border2); background:var(--grad-soft); box-shadow:var(--shadow);
  display:grid;place-items:center;
}
.photo-frame img{width:100%;height:100%;object-fit:cover}
.photo-fallback{display:none;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:24px;color:var(--muted)}
.photo-fallback span{font-family:var(--font-display);font-weight:900;color:var(--white);font-size:1.2rem;letter-spacing:2px}
.photo-fallback code{color:var(--cyan);background:rgba(0,212,255,.1);padding:2px 8px;border-radius:6px}
.photo-empty .photo-fallback{display:flex}
.photo-ring{position:absolute;inset:-14px;border-radius:30px;border:1px dashed rgba(0,212,255,.35);
            animation:spin 26s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Servicios ---------- */
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.service-card{
  background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--border);
  border-radius:var(--radius);padding:28px 24px;transition:.25s;position:relative;overflow:hidden;
}
.service-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad);
                      transform:scaleX(0);transform-origin:left;transition:.3s}
.service-card:hover{transform:translateY(-6px);border-color:var(--border2);box-shadow:var(--shadow)}
.service-card:hover::before{transform:scaleX(1)}
.service-card h3{font-size:1.3rem;margin:14px 0 8px}
.service-card p{color:var(--muted)}
.svc-icon{width:52px;height:52px;border-radius:13px;background:var(--grad-soft);
          border:1px solid var(--border2);display:grid;place-items:center}
.svc-icon::after{content:"";width:22px;height:22px;background:var(--grad);border-radius:5px;
                 -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.svc-icon[data-icon="code"]::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 6l-6 6 6 6M16 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E")}
.svc-icon[data-icon="palette"]::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='9' cy='9' r='1.4' fill='%23000'/%3E%3Ccircle cx='15' cy='9' r='1.4' fill='%23000'/%3E%3C/svg%3E")}
.svc-icon[data-icon="grid"]::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z' fill='%23000'/%3E%3C/svg%3E")}
.svc-icon[data-icon="shield"]::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.5 8.5-8 11-4.5-2.5-8-6-8-11V5z' fill='%23000'/%3E%3C/svg%3E")}

/* ---------- Sobre mí ---------- */
.about-card{
  background:var(--grad-soft);border:1px solid var(--border2);border-radius:22px;
  padding:clamp(28px,5vw,52px);max-width:900px;margin:0 auto;text-align:center;
}
.about-card h2{font-size:clamp(1.8rem,4vw,2.5rem);margin-bottom:16px}
.about-card p{font-size:1.12rem;color:var(--text)}
.about-badges{list-style:none;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.about-badges li{font-family:var(--font-display);font-size:.72rem;letter-spacing:1px;
  color:var(--cyan);border:1px solid var(--border2);border-radius:20px;padding:8px 16px;
  background:rgba(0,212,255,.06)}

/* ---------- Contacto ---------- */
.contact-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:26px;align-items:start}
.contact-direct{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:26px;position:sticky;top:90px}
.direct-item{display:flex;gap:14px;align-items:center;padding:16px;border-radius:12px;
             border:1px solid var(--border);margin-bottom:12px;transition:.2s;background:var(--bg2)}
.direct-item:hover{border-color:var(--cyan);transform:translateX(4px)}
.di-icon{font-size:1.5rem}
.direct-item b{display:block;color:var(--white);font-family:var(--font-head)}
.direct-item small{color:var(--muted)}
.direct-note{color:var(--muted);font-size:.85rem;margin-top:8px;line-height:1.5}

.contact-form{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
              padding:clamp(22px,4vw,36px);display:flex;flex-direction:column;gap:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.contact-form label{display:flex;flex-direction:column;gap:7px;font-weight:600;color:var(--text);font-size:.95rem}
.contact-form input,.contact-form select,.contact-form textarea{
  font-family:var(--font-body);font-size:1rem;color:var(--white);background:var(--bg2);
  border:1px solid var(--border);border-radius:10px;padding:12px 14px;transition:.2s;
}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,212,255,.15)}
.contact-form textarea{resize:vertical}
.fs-services{border:1px solid var(--border);border-radius:12px;padding:16px}
.fs-services legend{padding:0 8px;color:var(--text);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{flex-direction:row !important;align-items:center;gap:8px;background:var(--bg2);
      border:1px solid var(--border);border-radius:20px;padding:9px 15px;cursor:pointer;transition:.2s}
.chip:hover{border-color:var(--border2)}
.chip:has(input:checked){border-color:var(--cyan);background:rgba(0,212,255,.1);color:var(--white)}
.chip input{accent-color:var(--cyan);width:16px;height:16px}
.consent{flex-direction:row !important;align-items:flex-start;gap:10px;font-weight:400 !important;color:var(--muted)}
.consent input{margin-top:4px;accent-color:var(--cyan);width:18px;height:18px}
.consent a{color:var(--cyan);text-decoration:underline}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{text-align:center;font-weight:600;min-height:1.4em}
.form-status.ok{color:var(--green)}
.form-status.err{color:var(--orange)}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--border);background:var(--bg2);margin-top:24px;
        padding:clamp(28px,4vw,40px) clamp(16px,4vw,40px) 24px}
.foot-grid{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;
           gap:24px;flex-wrap:wrap;align-items:center}
.foot-grid p{color:var(--text)}
.foot-iso{max-width:520px}
.foot-iso b{color:var(--white);display:block;margin-bottom:6px;font-family:var(--font-head)}
.foot-iso span{color:var(--muted);font-size:.85rem;line-height:1.7}
.foot-legal{text-align:center;color:var(--muted);font-size:.85rem;margin-top:24px;
            border-top:1px solid var(--border);padding-top:18px}

/* ---------- Overlay de bloqueo ---------- */
#devtools-shield{
  position:fixed;inset:0;z-index:9999;display:none;place-items:center;
  background:rgba(4,8,18,.97);backdrop-filter:blur(8px);text-align:center;padding:24px;
}
#devtools-shield.show{display:grid}
.shield-inner{max-width:460px}
.shield-icon{font-size:4.5rem;margin-bottom:10px;filter:drop-shadow(0 0 20px rgba(0,212,255,.5))}
#devtools-shield h2{font-family:var(--font-display);color:var(--cyan);font-size:2rem;margin-bottom:14px}
#devtools-shield p{color:var(--text);margin-bottom:10px}
.shield-note{color:var(--orange) !important;font-weight:600}

/* ---------- Responsivo ---------- */
@media (max-width:880px){
  .hero{grid-template-columns:1fr;text-align:center}
  .hero-photo{order:-1}
  .hero-actions,.hero-stats{justify-content:center}
  .contact-wrap{grid-template-columns:1fr}
  .contact-direct{position:static}
  .grid-2,.grid-3{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;scroll-behavior:auto}
}
/* Bloqueo de selección/arraste como disuasivo (no es seguridad real) */
body.lock-select{user-select:none;-webkit-user-select:none}
img{ -webkit-user-drag:none; user-select:none }

/* ============================================================================
   MEJORAS v2 — impacto, movimiento y conversión honesta
   ========================================================================== */

/* ---- Entrada del hero (CSS puro, sin depender de JS) ---- */
.hero-copy>*{animation:heroIn .8s cubic-bezier(.2,.7,.2,1) both}
.hero-copy .eyebrow{animation-delay:.05s}
.hero-copy h1{animation-delay:.12s}
.hero-copy .hero-role{animation-delay:.20s}
.hero-copy .lead{animation-delay:.28s}
.hero-copy .hero-actions{animation-delay:.36s}
.hero-copy .hero-stats{animation-delay:.44s}
.hero-photo{animation:heroIn .9s .2s cubic-bezier(.2,.7,.2,1) both}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---- Rotador de especialidad ---- */
.hero-role{font-family:var(--font-display);font-size:clamp(1rem,2.5vw,1.4rem);
  color:var(--text);margin-top:12px;letter-spacing:.5px;min-height:1.7em}
.rotator{color:var(--cyan);font-weight:700;border-bottom:2px solid rgba(0,212,255,.4);
  padding-bottom:2px;transition:opacity .3s ease,transform .3s ease;display:inline-block}
.rotator.swap{opacity:0;transform:translateY(-8px)}

/* ---- Foto: perspectiva + halo ---- */
.hero-photo{perspective:1000px}
.hero-photo::after{content:"";position:absolute;width:72%;height:72%;border-radius:50%;
  background:radial-gradient(circle,rgba(0,212,255,.35),transparent 65%);filter:blur(55px);z-index:-1}
.photo-frame{transition:transform .18s ease,box-shadow .3s ease;transform-style:preserve-3d}
.photo-frame:hover{box-shadow:0 30px 70px rgba(0,212,255,.28)}

/* ---- Hero stats como tarjetas glass ---- */
.hero-stats li{position:relative;overflow:hidden;padding:14px 20px;border-radius:14px;
  background:linear-gradient(180deg,rgba(18,35,63,.72),rgba(10,18,36,.55));
  border:1px solid var(--border);backdrop-filter:blur(6px);transition:.25s}
.hero-stats li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad)}
.hero-stats li:hover{transform:translateY(-4px);border-color:var(--border2);box-shadow:0 14px 30px rgba(0,0,0,.4)}

/* ---- Botón con pulso (afordancia, no falsa urgencia) ---- */
.btn.pulse{position:relative}
.btn.pulse::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  animation:ctaPulse 3.2s ease-out infinite}
@keyframes ctaPulse{0%{box-shadow:0 0 0 0 rgba(0,212,255,.4)}70%{box-shadow:0 0 0 16px rgba(0,212,255,0)}100%{box-shadow:0 0 0 0 rgba(0,212,255,0)}}

/* ---- Reveal al hacer scroll ---- */
.js .reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.08s}
.js .reveal.d2{transition-delay:.16s}
.js .reveal.d3{transition-delay:.24s}

/* ---- Franja de prueba / credibilidad ---- */
.proof{padding-top:0}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.proof-item{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--border);
  border-radius:16px;padding:24px 20px;text-align:center;transition:.25s}
.proof-item:hover{border-color:var(--border2);transform:translateY(-4px);box-shadow:var(--shadow)}
.proof-num{font-family:var(--font-display);font-weight:900;line-height:1;
  font-size:clamp(1.8rem,4vw,2.6rem);background:var(--grad);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.proof-label{color:var(--muted);margin-top:10px;font-size:.95rem;line-height:1.4}

/* ---- Cómo trabajo (proceso) ---- */
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{position:relative;background:linear-gradient(180deg,var(--card),var(--bg2));
  border:1px solid var(--border);border-radius:18px;padding:30px 26px;transition:.25s}
.step:hover{border-color:var(--border2);transform:translateY(-6px);box-shadow:var(--shadow)}
.step-num{font-family:var(--font-display);font-weight:900;font-size:1rem;width:46px;height:46px;
  display:grid;place-items:center;border-radius:12px;background:var(--grad-soft);
  border:1px solid var(--border2);color:var(--cyan);margin-bottom:16px}
.step h3{font-size:1.25rem;margin-bottom:8px}
.step p{color:var(--muted)}
.step::after{content:"";position:absolute;top:54px;right:-14px;width:28px;height:2px;
  background:var(--border2);z-index:1}
.step:last-child::after{display:none}

/* ---- Compromisos (risk reversal honesto) ---- */
.guarantee{margin-top:18px;display:flex;flex-direction:column;gap:14px;
  border-top:1px solid var(--border);padding-top:18px}
.gitem{display:flex;gap:12px;align-items:flex-start}
.gitem .gcheck{flex:0 0 auto;width:22px;height:22px;margin-top:1px;border-radius:7px;
  background:var(--grad-soft);border:1px solid var(--border2);display:grid;place-items:center;
  color:var(--cyan);font-weight:900;font-size:.8rem}
.gitem b{display:block;color:var(--white);font-family:var(--font-head);font-size:.95rem}
.gitem small{color:var(--muted);line-height:1.4}

/* ---- Banda CTA final ---- */
.cta{padding-top:0}
.cta-band{background:var(--grad-soft);border:1px solid var(--border2);border-radius:24px;
  padding:clamp(32px,5vw,58px);text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(600px 200px at 50% 0%,rgba(0,212,255,.16),transparent 70%)}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{font-size:clamp(1.7rem,4vw,2.6rem);margin-bottom:12px}
.cta-band p{color:var(--text);max-width:560px;margin:0 auto 24px;font-size:1.1rem}

/* ---- Responsivo v2 ---- */
@media (max-width:880px){
  .proof-grid{grid-template-columns:1fr 1fr}
  .process-grid{grid-template-columns:1fr}
  .step::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1 !important;transform:none !important}
  .rotator{transition:none}
}

/* ============================================================================
   MEJORAS v3 — "futurista": fondo que transiciona por sección, tarjetas
   reactivas al cursor (tilt + spotlight + borde degradado), aura de cursor,
   barra de progreso de scroll y botones magnéticos.
   ========================================================================== */

/* ---- Capas de "mood": se funden entre sí al hacer scroll ---- */
.bg-moods{position:absolute;inset:0}
.mood{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.mood--cool{opacity:1;background:
  radial-gradient(46% 50% at 18% 22%,rgba(0,212,255,.26),transparent 70%),
  radial-gradient(44% 48% at 86% 26%,rgba(0,120,255,.18),transparent 72%)}
.mood--warm{background:
  radial-gradient(48% 52% at 82% 20%,rgba(255,107,53,.24),transparent 70%),
  radial-gradient(44% 50% at 18% 64%,rgba(255,60,120,.16),transparent 72%)}
.mood--violet{background:
  radial-gradient(50% 55% at 28% 30%,rgba(155,89,255,.26),transparent 70%),
  radial-gradient(44% 50% at 78% 72%,rgba(0,212,255,.16),transparent 72%)}
.mood--mint{background:
  radial-gradient(48% 52% at 24% 74%,rgba(0,255,157,.22),transparent 70%),
  radial-gradient(44% 50% at 82% 26%,rgba(0,212,255,.18),transparent 72%)}
body[data-mood] .mood{opacity:0}
body[data-mood="cool"]   .mood--cool  {opacity:1}
body[data-mood="warm"]   .mood--warm  {opacity:1}
body[data-mood="violet"] .mood--violet{opacity:1}
body[data-mood="mint"]   .mood--mint  {opacity:1}

/* ---- Barra de progreso de scroll ---- */
.scroll-prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;
  background:rgba(255,255,255,.04);pointer-events:none}
.scroll-prog>i{display:block;height:100%;width:0;border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,var(--cyan),var(--orange));
  box-shadow:0 0 12px rgba(0,212,255,.6)}

/* ---- Aura que sigue el cursor (capa global, screen blend) ---- */
.cursor-aura{position:fixed;top:0;left:-1000px;width:520px;height:520px;border-radius:50%;
  z-index:0;pointer-events:none;opacity:0;transition:opacity .4s ease;will-change:transform;
  background:radial-gradient(circle,rgba(0,212,255,.10),rgba(155,89,255,.06) 42%,transparent 68%);
  mix-blend-mode:screen}
.cursor-aura.on{opacity:1}

/* ---- Tarjetas reactivas: tilt + spotlight interno + borde degradado ---- */
.service-card,.proof-item,.step,.hero-stats li{
  transition:transform .16s ease,border-color .25s ease,box-shadow .3s ease,background .25s ease}
.about-card,.cta-band{transition:background .25s ease,border-color .25s ease,box-shadow .3s ease}

.service-card:hover,.proof-item:hover,.step:hover{
  border-color:transparent;box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 26px rgba(0,212,255,.12);
  background:
    radial-gradient(180px 180px at var(--mx,50%) var(--my,50%),rgba(0,212,255,.16),transparent 60%) padding-box,
    linear-gradient(180deg,var(--card),var(--bg2)) padding-box,
    linear-gradient(135deg,var(--cyan),var(--orange)) border-box}
.hero-stats li:hover{
  border-color:transparent;
  background:
    radial-gradient(180px 180px at var(--mx,50%) var(--my,50%),rgba(0,212,255,.16),transparent 60%) padding-box,
    linear-gradient(180deg,rgba(18,35,63,.72),rgba(10,18,36,.55)) padding-box,
    linear-gradient(135deg,var(--cyan),var(--orange)) border-box}
.about-card:hover{
  border-color:transparent;
  background:
    radial-gradient(260px 260px at var(--mx,50%) var(--my,50%),rgba(0,212,255,.14),transparent 60%) padding-box,
    var(--grad-soft) padding-box,
    linear-gradient(135deg,var(--cyan),var(--orange)) border-box}
.cta-band:hover{
  border-color:transparent;
  background:
    radial-gradient(320px 320px at var(--mx,50%) var(--my,50%),rgba(0,212,255,.13),transparent 60%) padding-box,
    var(--grad-soft) padding-box,
    linear-gradient(135deg,var(--cyan),var(--orange)) border-box}

/* ---- Botones magnéticos: transición suave del desplazamiento ---- */
.btn.pulse{transition:transform .18s cubic-bezier(.2,.7,.2,1),filter .2s,box-shadow .2s}

@media (prefers-reduced-motion:reduce){
  .mood{transition:none}
  .cursor-aura{display:none}
}
@media (pointer:coarse){
  .cursor-aura{display:none}
}

/* ============================================================================
   MEJORAS v4 — redes sociales + responsive robusto (retrato, apaisado, tablet)
   ========================================================================== */

/* ---- Fila de redes sociales ---- */
.social{list-style:none;display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.social a{position:relative;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  color:var(--text);border:1px solid var(--border);transition:.2s;
  background:linear-gradient(180deg,rgba(18,35,63,.7),rgba(10,18,36,.5))}
.social a:hover{color:#04101f;border-color:transparent;transform:translateY(-3px);
  background:linear-gradient(135deg,var(--cyan),var(--orange));box-shadow:0 12px 26px rgba(0,212,255,.3)}
.social a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.social svg{width:21px;height:21px;fill:currentColor;display:block}
.foot-social{margin-top:14px}

/* ---- Responsive: tablet ---- */
@media (max-width:960px){
  .hero{grid-template-columns:1fr;text-align:center}
  .hero-photo{order:-1}
  .hero-actions,.hero-stats,.social{justify-content:center}
  .photo-frame{width:min(360px,72vw)}
}
@media (max-width:768px){
  section{padding:clamp(28px,6vw,46px) 0}
  .grid-3{grid-template-columns:1fr 1fr}
  .foot-grid{justify-content:center;text-align:center}
  .foot-iso{max-width:100%}
}
/* ---- Responsive: teléfono retrato ---- */
@media (max-width:600px){
  .nav-links a:not(.nav-cta){display:none}
  .nav{padding:10px 16px}
  .proof-grid{grid-template-columns:1fr 1fr}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .hero h1{font-size:clamp(2.3rem,13vw,3rem)}
  .hero-actions{flex-direction:column;width:100%}
  .hero-actions .btn{width:100%}
  .hero-stats{width:100%}
  .hero-stats li{flex:1 1 45%}
}
@media (max-width:400px){
  .proof-grid{grid-template-columns:1fr}
  .hero-stats li{flex:1 1 100%}
  .about-badges li{font-size:.66rem;padding:6px 12px}
  .social a{width:42px;height:42px}
}
/* ---- Responsive: teléfono apaisado (poca altura) ---- */
@media (orientation:landscape) and (max-height:540px){
  .hero{padding-top:20px}
  section{padding:clamp(20px,5vh,36px) 0}
  .nav{position:static}
}
/* ---- Pantallas muy anchas: no estirar de más ---- */
@media (min-width:1500px){
  :root{--maxw:1280px}
}

/* ---- Botón flotante de WhatsApp ---- */
.wa-fab{position:fixed;right:20px;bottom:20px;z-index:70;width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;background:#25d366;transition:transform .2s ease,box-shadow .25s ease;
  box-shadow:0 12px 30px rgba(37,211,102,.45)}
.wa-fab[hidden]{display:none}
.wa-fab svg{width:31px;height:31px;fill:#fff}
.wa-fab:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 18px 42px rgba(37,211,102,.55)}
/* El pulso anima transform+opacity (compuesto en GPU) en vez de la extensión de
   box-shadow, que obliga a repintar el anillo en cada fotograma. Mismo aspecto,
   sin trabajo de pintado: scale(1.62) sobre 58px equivale a los 18px previos. */
.wa-fab::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:2px solid rgba(37,211,102,.5);will-change:transform,opacity;
  animation:waPulse 2.8s ease-out infinite}
@keyframes waPulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.62);opacity:0}100%{transform:scale(1.62);opacity:0}}
@media (max-width:600px){.wa-fab{right:14px;bottom:14px;width:52px;height:52px}.wa-fab svg{width:28px;height:28px}}
@media (prefers-reduced-motion:reduce){.wa-fab::after{animation:none}}

/* ---- Widget de WhatsApp (lead: nombre + teléfono) ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wa-widget{position:fixed;right:20px;bottom:88px;z-index:71;width:min(340px,calc(100vw - 28px));
  border-radius:18px;overflow:hidden;background:#fff;color:#111b21;font-family:var(--font-body);
  box-shadow:0 24px 60px rgba(0,0,0,.5);border:1px solid rgba(0,0,0,.08);
  transform-origin:bottom right;animation:wawIn .22s ease-out}
.wa-widget[hidden]{display:none}
@keyframes wawIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.waw-head{display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:linear-gradient(135deg,#25d366,#128c7e);color:#fff}
.waw-avatar{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.22);font-family:var(--font-display);font-weight:700;font-size:16px}
.waw-id{flex:1;min-width:0;line-height:1.2}
.waw-id b{display:block;font-size:14.5px;font-weight:700}
.waw-id small{display:flex;align-items:center;gap:6px;font-size:11.5px;opacity:.92}
.waw-dot{width:7px;height:7px;border-radius:50%;background:#a7f3d0;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.waw-close{margin-left:auto;background:transparent;border:0;color:#fff;font-size:22px;line-height:1;
  cursor:pointer;width:28px;height:28px;border-radius:8px;opacity:.9}
.waw-close:hover{background:rgba(255,255,255,.18)}
.waw-body{padding:14px;background:#f6f7f9}
.waw-bubble{background:#fff;border-radius:12px;padding:11px 12px;margin-bottom:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.12);font-size:13.5px;line-height:1.45;color:#1f2a30}
.waw-bubble p{margin:0}
.waw-time{display:block;text-align:right;font-size:10.5px;color:#8696a0;margin-top:4px}
.waw-form{display:grid;gap:9px}
.waw-field input{width:100%;padding:11px 12px;border:1px solid #d6dce0;border-radius:10px;
  font:inherit;font-size:14px;color:#111b21;background:#fff}
.waw-field input:focus{outline:none;border-color:#25d366;box-shadow:0 0 0 3px rgba(37,211,102,.18)}
.waw-consent{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:#3b4a54;line-height:1.35}
.waw-consent input{margin-top:2px;accent-color:#25d366;width:16px;height:16px;flex:0 0 auto}
.waw-consent a{color:#128c7e;text-decoration:underline}
.waw-start{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;
  border:0;border-radius:11px;cursor:pointer;color:#fff;font:inherit;font-weight:700;font-size:14.5px;
  background:linear-gradient(135deg,#25d366,#12a150);box-shadow:0 8px 20px rgba(37,211,102,.4);
  transition:transform .15s ease,box-shadow .2s ease}
.waw-start svg{width:20px;height:20px;fill:#fff}
.waw-start:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(37,211,102,.5)}
.waw-start:disabled{opacity:.6;cursor:default;transform:none}
.waw-status{min-height:1.2em;text-align:center;font-size:12.5px;font-weight:600;margin:2px 0 0}
.waw-status.ok{color:#0a7d33}
.waw-status.err{color:#c0392b}
@media (max-width:600px){.wa-widget{right:12px;left:12px;bottom:78px;width:auto}}
@media (prefers-reduced-motion:reduce){.wa-widget{animation:none}.waw-start{transition:none}}

/* @@ESPACIAL_LAYER@@ */
/* ═══════════════════════════════════════════════════════════════════════
   DexFact IT — Sistema "ESTACIÓN ORBITAL" v5
   Liquid Glass · Bento asimétrico · Claymorfismo · Glassmorfismo ·
   Brutalismo · minimal-maximalismo → UI espacial futurista.
   Solo estética. Contratos de app.js/security.js intactos. CSP intacta
   (sin @import ni url() externas). Pseudos libres: service-card::after,
   proof-item, about-card, cta-band. NUNCA .step::after (=conector base).
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --nc:#28e8ff; --no:#ff7a3c; --nv:#a274ff; --nm:#39ffc8;
  --glass:linear-gradient(150deg,rgba(120,170,255,.14),rgba(12,22,46,.42) 46%,rgba(6,11,26,.58));
  --glass-hi:linear-gradient(150deg,rgba(150,195,255,.20),rgba(16,28,56,.40));
  --gbrd:rgba(130,185,255,.24);
  --blur:blur(22px) saturate(160%);
  --clay:inset 3px 3px 6px rgba(160,200,255,.14),inset -6px -8px 16px rgba(0,0,0,.52),0 18px 34px -16px rgba(0,0,0,.72);
  --depth:0 34px 70px -30px rgba(1,4,12,.92);
  --font-mono:'Orbitron',ui-monospace,monospace;
}

/* ══════════ 1 · ATMÓSFERA ESPACIAL ══════════ */
.bg-base{
  background:
    radial-gradient(1200px 780px at 50% -14%, #0d2148 0%, transparent 58%),
    radial-gradient(900px 700px at 100% 4%, #131a44 0%, transparent 55%),
    radial-gradient(820px 620px at 0% 30%, #1a1030 0%, transparent 58%),
    linear-gradient(180deg,#070d1f 0%,#04060f 62%,#03040b 100%);
}
/* Nebulosa que respira */
.bg-aurora{
  background:
    radial-gradient(46% 40% at 82% 4%,  rgba(40,232,255,.22), transparent 60%),
    radial-gradient(44% 38% at 8% 16%,  rgba(162,116,255,.20), transparent 62%),
    radial-gradient(50% 44% at 60% 108%,rgba(255,122,60,.12),  transparent 64%);
}
.bg-aurora::before,.bg-aurora::after{
  content:"";position:absolute;border-radius:50%;filter:blur(70px);
  will-change:transform,border-radius;pointer-events:none;
}
.bg-aurora::before{width:48vmax;height:48vmax;left:-14vmax;top:-12vmax;
  background:radial-gradient(circle at 38% 36%,rgba(40,232,255,.26),rgba(0,90,200,.06) 55%,transparent 66%);
  border-radius:56% 44% 55% 45%/48% 60% 40% 52%;animation:blobA 30s ease-in-out infinite alternate}
.bg-aurora::after{width:44vmax;height:44vmax;right:-16vmax;bottom:-2vmax;
  background:radial-gradient(circle at 60% 55%,rgba(162,116,255,.22),rgba(255,122,60,.08) 52%,transparent 66%);
  border-radius:45% 55% 40% 60%/60% 42% 58% 40%;animation:blobB 38s ease-in-out infinite alternate}
@keyframes blobA{to{transform:translate3d(6vmax,4vmax,0) rotate(16deg) scale(1.12);border-radius:50% 50% 62% 38%/46% 54% 46% 54%}}
@keyframes blobB{to{transform:translate3d(-6vmax,-4vmax,0) rotate(-14deg) scale(1.14);border-radius:60% 40% 52% 48%/44% 58% 42% 56%}}

/* Piso sintético en perspectiva (horizonte synthwave) */
.bg-grid{
  inset:auto 0 0 0;height:52vh;
  background-image:
    linear-gradient(rgba(40,232,255,.30) 1px,transparent 1px),
    linear-gradient(90deg,rgba(40,232,255,.20) 1px,transparent 1px);
  background-size:74px 74px;
  transform:perspective(340px) rotateX(66deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000 6%,transparent 72%);
  mask-image:linear-gradient(to top,#000 6%,transparent 72%);
  opacity:.55;animation:floor 7s linear infinite;
}
@keyframes floor{to{background-position:0 74px,0 0}}
/* Resplandor del horizonte */
.bg-vignette{
  background:
    radial-gradient(120% 46% at 50% 100%, rgba(40,232,255,.16), transparent 56%),
    radial-gradient(80% 40% at 50% 104%, rgba(162,116,255,.20), transparent 60%),
    radial-gradient(130% 92% at 50% 26%, transparent 52%, rgba(2,4,10,.66) 100%);
}
.bg-stars{opacity:.85}

/* ══════════ 2 · NAV (glass + terminal) ══════════ */
.nav{
  background:linear-gradient(180deg,rgba(8,14,30,.82),rgba(8,14,30,.55));
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid rgba(130,185,255,.16);
}
.brand-mark{box-shadow:0 0 24px rgba(40,232,255,.5),4px 4px 0 rgba(255,122,60,.55)}
.brand-text{letter-spacing:2px}
.nav-links a{letter-spacing:.5px}

/* ══════════ 3 · TIPOGRAFÍA MAXIMALISTA ══════════ */
.eyebrow{font-family:var(--font-mono);font-size:.78rem;letter-spacing:4px;color:var(--nc)}
.eyebrow::before{content:"[ "}
.eyebrow::after{content:" ]"}
.hero h1{
  font-size:clamp(3.2rem,9vw,6.4rem);line-height:.92;letter-spacing:-1px;
  text-shadow:0 0 46px rgba(40,232,255,.35),0 2px 0 rgba(0,0,0,.4);
}
.hero-role{font-family:var(--font-head);font-size:clamp(1.1rem,2.6vw,1.5rem);letter-spacing:.5px}

/* ══════════ 4 · HERO (glass + órbita) ══════════ */
.hero-copy{position:relative}
.photo-frame{
  border-radius:26px;border:1px solid var(--gbrd);
  box-shadow:var(--depth),0 0 60px -10px rgba(40,232,255,.35);
}
.photo-ring{
  border:1.5px dashed rgba(40,232,255,.5)!important;
  box-shadow:0 0 40px rgba(162,116,255,.3);animation:spin 26s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
/* Chips de garantía como clay */
.hero-stats li{
  background:var(--glass);box-shadow:var(--clay);border:1px solid rgba(150,195,255,.14);
  border-radius:16px;
}
.hero-stats b{font-family:var(--font-mono);letter-spacing:.5px}

/* ══════════ 5 · SUPERFICIES LIQUID GLASS ══════════ */
.service-card,.about-card,.cta-band,.contact-form,.contact-direct,.proof-item,.step{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--gbrd);
  box-shadow:inset 0 1px 0 rgba(190,220,255,.22),var(--depth);
  border-radius:20px;
}
/* Barrido de refracción (solo pseudos LIBRES: no .step) */
.service-card,.about-card,.cta-band,.proof-item{position:relative;overflow:hidden}
.service-card::after,.about-card::after,.cta-band::after,.proof-item::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 32%,rgba(200,235,255,.14) 46%,rgba(200,235,255,.03) 54%,transparent 68%);
  background-size:260% 100%;background-position:135% 0;transition:background-position .7s ease;
}
.service-card:hover::after,.about-card:hover::after,.cta-band:hover::after,.proof-item:hover::after{background-position:-55% 0}

/* ══════════ 6 · BENTO: PILARES DE SERVICIO ══════════ */
.proof-grid.pillars{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(132px,1fr);gap:clamp(12px,1.4vw,18px)}
.proof-grid.pillars .proof-item{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:clamp(20px,2.4vw,30px)}
.proof-grid.pillars .proof-item:nth-child(1){grid-column:span 2}
.proof-grid.pillars .proof-item:nth-child(6){grid-column:span 2}
/* Acento brutalista (línea con offset) por pilar */
.proof-grid.pillars .proof-item::before{
  content:"";width:34px;height:3px;border-radius:2px;background:var(--nc);
  box-shadow:3px 3px 0 rgba(255,122,60,.9);
}
.proof-grid.pillars .proof-num{
  font-family:var(--font-head);font-weight:800;line-height:1.06;letter-spacing:.3px;
  font-size:clamp(1.35rem,2.6vw,2rem);
  background:linear-gradient(120deg,var(--nc),#eaf6ff 62%,var(--nc));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.proof-grid.pillars .proof-item:nth-child(1) .proof-num,
.proof-grid.pillars .proof-item:nth-child(6) .proof-num{font-size:clamp(1.7rem,3.2vw,2.5rem)}
.proof-grid.pillars .proof-label{color:var(--muted);font-size:.98rem}

/* ══════════ 7 · SECCIÓN + BRUTALISMO ══════════ */
.section-head h2{font-size:clamp(2.1rem,5.6vw,3.4rem);letter-spacing:-.5px}
.section-head h2::after{
  content:"";display:block;width:74px;height:6px;margin:18px auto 0;border-radius:2px;
  background:var(--nc);box-shadow:7px 7px 0 rgba(255,122,60,.95);
}
.section-head p{letter-spacing:.4px}

/* ══════════ 8 · BENTO: SERVICIOS (feature + tiles) ══════════ */
@media (min-width:960px){
  .service-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:clamp(14px,1.6vw,20px)}
  .service-grid .service-card:nth-child(1){grid-column:span 2}
  .service-grid .service-card:nth-child(6){grid-column:span 2}
  .service-grid .service-card:nth-child(1) h3,
  .service-grid .service-card:nth-child(6) h3{font-size:1.5rem}
}
@media (min-width:600px) and (max-width:959px){
  .service-grid{grid-template-columns:repeat(2,1fr)}
}
.service-card{padding:clamp(20px,2.4vw,30px)}
.svc-icon{box-shadow:var(--clay);border-radius:14px}
.service-card h3{font-family:var(--font-head);letter-spacing:.3px}

/* ══════════ 9 · PASOS (clay badges) ══════════ */
.step{padding:clamp(20px,2.4vw,28px)}
.step-num{
  font-family:var(--font-mono);box-shadow:var(--clay);
  background:linear-gradient(150deg,rgba(40,232,255,.22),rgba(12,22,46,.5))!important;
  color:var(--nc)!important;border:1px solid rgba(40,232,255,.3);
}

/* ══════════ 10 · ISO badges + chips (clay) ══════════ */
.about-badges li,.chip{box-shadow:var(--clay);border-color:rgba(150,195,255,.16)}
.about-card{padding:clamp(26px,3vw,44px)}
.cta-band{padding:clamp(30px,3.4vw,52px);border-radius:24px}

/* ══════════ 11 · BOTONES (clay + neón) ══════════ */
.btn-primary{
  box-shadow:var(--clay),0 14px 34px -8px rgba(255,122,60,.4);
  border:1px solid rgba(255,180,120,.35);
}
.btn-primary:hover{box-shadow:var(--clay),0 20px 44px -8px rgba(40,232,255,.5)}
.btn-ghost{background:rgba(130,185,255,.06);border-color:rgba(130,185,255,.28)}

/* ══════════ 12 · FORM (glass + foco neón) ══════════ */
.contact-form input,.contact-form select,.contact-form textarea{
  background:rgba(8,16,34,.55)!important;border:1px solid rgba(130,185,255,.2)!important;border-radius:12px!important;
}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  border-color:var(--nc)!important;box-shadow:0 0 0 3px rgba(40,232,255,.18)!important;outline:none!important;
}

/* ══════════ 13 · RESPONSIVE del bento ══════════ */
@media (max-width:760px){
  .proof-grid.pillars{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
  .proof-grid.pillars .proof-item:nth-child(1),
  .proof-grid.pillars .proof-item:nth-child(6){grid-column:span 2}
  .hero h1{font-size:clamp(2.7rem,13vw,3.6rem)}
}

/* ══════════ 14 · ICONOS LineIcons (inline SVG, MIT/free — sin CDN, CSP-safe) ══════════ */
.svc-icon[data-icon='code']::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M15.0582 4.16286C15.1481 3.75851 14.8931 3.35788 14.4888 3.26802C14.0844 3.17816 13.6838 3.43311 13.5939 3.83746L10.0384 19.8374C9.94851 20.2418 10.2035 20.6424 10.6078 20.7323C11.0122 20.8221 11.4128 20.5672 11.5026 20.1628L15.0582 4.16286Z' fill='%23323544'/%3E %3Cpath d='M7.82913 7.46956C8.12204 7.76244 8.12206 8.23732 7.82918 8.53022L4.35946 12.0003L7.82916 15.47C8.12205 15.7628 8.12205 16.2377 7.82916 16.5306C7.53627 16.8235 7.06139 16.8235 6.7685 16.5306L2.7685 12.5306C2.47561 12.2377 2.4756 11.7629 2.76847 11.47L6.76847 7.46961C7.06135 7.1767 7.53623 7.17668 7.82913 7.46956Z' fill='%23323544'/%3E %3Cpath d='M17.2685 7.46956C16.9756 7.76244 16.9756 8.23732 17.2685 8.53022L20.7382 12.0003L17.2685 15.47C16.9756 15.7628 16.9756 16.2377 17.2685 16.5306C17.5614 16.8235 18.0363 16.8235 18.3292 16.5306L22.3292 12.5306C22.622 12.2377 22.6221 11.7629 22.3292 11.47L18.3292 7.46961C18.0363 7.1767 17.5614 7.17668 17.2685 7.46956Z' fill='%23323544'/%3E %3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M15.0582 4.16286C15.1481 3.75851 14.8931 3.35788 14.4888 3.26802C14.0844 3.17816 13.6838 3.43311 13.5939 3.83746L10.0384 19.8374C9.94851 20.2418 10.2035 20.6424 10.6078 20.7323C11.0122 20.8221 11.4128 20.5672 11.5026 20.1628L15.0582 4.16286Z' fill='%23323544'/%3E %3Cpath d='M7.82913 7.46956C8.12204 7.76244 8.12206 8.23732 7.82918 8.53022L4.35946 12.0003L7.82916 15.47C8.12205 15.7628 8.12205 16.2377 7.82916 16.5306C7.53627 16.8235 7.06139 16.8235 6.7685 16.5306L2.7685 12.5306C2.47561 12.2377 2.4756 11.7629 2.76847 11.47L6.76847 7.46961C7.06135 7.1767 7.53623 7.17668 7.82913 7.46956Z' fill='%23323544'/%3E %3Cpath d='M17.2685 7.46956C16.9756 7.76244 16.9756 8.23732 17.2685 8.53022L20.7382 12.0003L17.2685 15.47C16.9756 15.7628 16.9756 16.2377 17.2685 16.5306C17.5614 16.8235 18.0363 16.8235 18.3292 16.5306L22.3292 12.5306C22.622 12.2377 22.6221 11.7629 22.3292 11.47L18.3292 7.46961C18.0363 7.1767 17.5614 7.17668 17.2685 7.46956Z' fill='%23323544'/%3E %3C/svg%3E")}
.svc-icon[data-icon='palette']::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M15.0279 7.22682C15.516 6.73867 16.3075 6.73867 16.7956 7.22682C17.2838 7.71498 17.2839 8.50651 16.7957 8.99466C16.3075 9.48282 15.5161 9.48282 15.0279 8.99466C14.5398 8.50651 14.5397 7.71498 15.0279 7.22682Z' fill='%23323544'/%3E %3Cpath d='M9.01828 15.0053C8.53013 14.5171 7.73867 14.5171 7.25052 15.0053C6.76236 15.4934 6.76236 16.2849 7.25052 16.773C7.73867 17.2612 8.5302 17.2613 9.01836 16.7731C9.50651 16.2849 9.50644 15.4934 9.01828 15.0053Z' fill='%23323544'/%3E %3Cpath d='M7.0341 9.369C7.70093 9.54768 8.09666 10.2331 7.91798 10.8999C7.7393 11.5668 7.05386 11.9626 6.38702 11.7839C5.72019 11.6052 5.32446 10.9198 5.50314 10.253C5.68182 9.58615 6.36726 9.19032 7.0341 9.369Z' fill='%23323544'/%3E %3Cpath d='M10.9228 7.89465C11.5896 7.71598 11.9853 7.03056 11.8067 6.36372C11.628 5.69689 10.9426 5.30116 10.2757 5.47984C9.60889 5.65852 9.21306 6.34396 9.39174 7.0108C9.57042 7.67763 10.2559 8.07333 10.9228 7.89465Z' fill='%23323544'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.02344 12C2.02344 6.47715 6.50059 2 12.0234 2C17.5463 2 22.0234 6.47715 22.0234 12C22.0234 12.7351 21.4156 13.2734 20.7352 13.2734H17.0372C15.3782 13.2734 14.0332 14.6184 14.0332 16.2775C14.0332 17.0726 14.3484 17.8353 14.9098 18.3984C15.4491 18.9393 15.6486 19.6836 15.5 20.3542C15.3477 21.042 14.8269 21.6373 14.0164 21.8012C13.3717 21.9317 12.7052 22 12.0234 22C6.50059 22 2.02344 17.5228 2.02344 12ZM12.0234 3.5C7.32902 3.5 3.52344 7.30558 3.52344 12C3.52344 16.6944 7.32902 20.5 12.0234 20.5C12.6047 20.5 13.1717 20.4418 13.7189 20.331C13.9076 20.2929 14.0023 20.18 14.0355 20.0297C14.0727 19.8622 14.028 19.6385 13.8476 19.4575C13.0059 18.6132 12.5332 17.4696 12.5332 16.2775C12.5332 13.79 14.5497 11.7734 17.0372 11.7734H20.5205C20.4004 7.18374 16.6421 3.5 12.0234 3.5Z' fill='%23323544'/%3E %3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M15.0279 7.22682C15.516 6.73867 16.3075 6.73867 16.7956 7.22682C17.2838 7.71498 17.2839 8.50651 16.7957 8.99466C16.3075 9.48282 15.5161 9.48282 15.0279 8.99466C14.5398 8.50651 14.5397 7.71498 15.0279 7.22682Z' fill='%23323544'/%3E %3Cpath d='M9.01828 15.0053C8.53013 14.5171 7.73867 14.5171 7.25052 15.0053C6.76236 15.4934 6.76236 16.2849 7.25052 16.773C7.73867 17.2612 8.5302 17.2613 9.01836 16.7731C9.50651 16.2849 9.50644 15.4934 9.01828 15.0053Z' fill='%23323544'/%3E %3Cpath d='M7.0341 9.369C7.70093 9.54768 8.09666 10.2331 7.91798 10.8999C7.7393 11.5668 7.05386 11.9626 6.38702 11.7839C5.72019 11.6052 5.32446 10.9198 5.50314 10.253C5.68182 9.58615 6.36726 9.19032 7.0341 9.369Z' fill='%23323544'/%3E %3Cpath d='M10.9228 7.89465C11.5896 7.71598 11.9853 7.03056 11.8067 6.36372C11.628 5.69689 10.9426 5.30116 10.2757 5.47984C9.60889 5.65852 9.21306 6.34396 9.39174 7.0108C9.57042 7.67763 10.2559 8.07333 10.9228 7.89465Z' fill='%23323544'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.02344 12C2.02344 6.47715 6.50059 2 12.0234 2C17.5463 2 22.0234 6.47715 22.0234 12C22.0234 12.7351 21.4156 13.2734 20.7352 13.2734H17.0372C15.3782 13.2734 14.0332 14.6184 14.0332 16.2775C14.0332 17.0726 14.3484 17.8353 14.9098 18.3984C15.4491 18.9393 15.6486 19.6836 15.5 20.3542C15.3477 21.042 14.8269 21.6373 14.0164 21.8012C13.3717 21.9317 12.7052 22 12.0234 22C6.50059 22 2.02344 17.5228 2.02344 12ZM12.0234 3.5C7.32902 3.5 3.52344 7.30558 3.52344 12C3.52344 16.6944 7.32902 20.5 12.0234 20.5C12.6047 20.5 13.1717 20.4418 13.7189 20.331C13.9076 20.2929 14.0023 20.18 14.0355 20.0297C14.0727 19.8622 14.028 19.6385 13.8476 19.4575C13.0059 18.6132 12.5332 17.4696 12.5332 16.2775C12.5332 13.79 14.5497 11.7734 17.0372 11.7734H20.5205C20.4004 7.18374 16.6421 3.5 12.0234 3.5Z' fill='%23323544'/%3E %3C/svg%3E")}
.svc-icon[data-icon='shield']::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M4.25315 5.39728C5.24418 5.9627 6.47801 5.25034 6.48385 4.10938L7.98373 4.10938C7.98956 5.25038 9.22343 5.96275 10.2145 5.3973L10.9635 6.6946C11.3812 6.46162 11.8798 6.30786 12.3876 6.21697C12.3568 6.12702 12.3169 6.03871 12.2675 5.95326L11.5095 4.64028C11.0998 3.93076 10.1954 3.68503 9.48364 4.0873C9.47615 3.26978 8.81111 2.60938 7.99183 2.60938H6.47573C5.65647 2.60938 4.99145 3.26976 4.98393 4.08724C4.27222 3.68501 3.3678 3.93074 2.95817 4.64024L2.20012 5.95323C1.79048 6.66275 2.0299 7.56889 2.73413 7.98413C2.0299 8.39938 1.7905 9.30551 2.20013 10.015L2.95819 11.328C3.36782 12.0375 4.27222 12.2832 4.98394 11.881C4.98962 12.4994 5.37154 13.0279 5.91185 13.2486C5.909 12.6779 6.05286 12.0988 6.35883 11.5689L6.4266 11.4515C6.17233 10.5593 5.11989 10.0765 4.25316 10.571L3.50323 9.27204C4.48844 8.69649 4.48842 7.27175 3.50321 6.69621L4.25315 5.39728Z' fill='%23323544'/%3E %3Cpath d='M7.23401 9.48438C8.06244 9.48438 8.73401 8.8128 8.73401 7.98438C8.73401 7.15595 8.06244 6.48438 7.23401 6.48438C6.40558 6.48438 5.73401 7.15595 5.73401 7.98438C5.73401 8.8128 6.40558 9.48438 7.23401 9.48438Z' fill='%23323544'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.6406 15.1107C11.6406 13.418 13.0129 12.0457 14.7056 12.0457C16.3984 12.0457 17.7706 13.418 17.7706 15.1107C17.7706 16.8035 16.3984 18.1757 14.7056 18.1757C13.0129 18.1757 11.6406 16.8035 11.6406 15.1107ZM14.7056 13.5457C13.8413 13.5457 13.1406 14.2464 13.1406 15.1107C13.1406 15.975 13.8413 16.6757 14.7056 16.6757C15.57 16.6757 16.2706 15.975 16.2706 15.1107C16.2706 14.2464 15.57 13.5457 14.7056 13.5457Z' fill='%23323544'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.65797 17.9026C7.15164 17.0256 7.45257 15.9045 8.32916 15.3984C8.55144 15.27 8.55094 14.9496 8.32953 14.8218C7.45293 14.3157 7.15258 13.1948 7.65869 12.3182L8.76495 10.4021C9.27102 9.52553 10.3919 9.22535 11.2683 9.73135C11.49 9.85937 11.767 9.69928 11.767 9.44355C11.767 8.43154 12.5874 7.61115 13.5994 7.61115H15.8121C16.8245 7.61115 17.6448 8.43199 17.6448 9.44397C17.6448 9.7002 17.9221 9.85987 18.1434 9.73212C19.0198 9.22613 20.1404 9.52641 20.6464 10.4028L21.7531 12.3196C22.259 13.1959 21.9588 14.3164 21.0825 14.8223C20.8615 14.9499 20.861 15.2697 21.0829 15.3978C21.9591 15.9037 22.26 17.0245 21.7538 17.9012L20.6475 19.8173C20.1414 20.6939 19.0205 20.9942 18.1439 20.4881C17.9222 20.3601 17.6448 20.5201 17.6448 20.7764C17.6448 21.7886 16.8243 22.6094 15.8119 22.6094H13.5996C12.5875 22.6094 11.767 21.7889 11.767 20.7768C11.767 20.5211 11.4899 20.3606 11.2678 20.4888C10.3913 20.9949 9.27006 20.6948 8.76384 19.818L7.65797 17.9026ZM9.07916 16.6974C8.91962 16.7895 8.86512 16.9935 8.957 17.1526L10.0629 19.068C10.1547 19.2271 10.3584 19.2818 10.5178 19.1898C11.7392 18.4846 13.267 19.3656 13.267 20.7768C13.267 20.9605 13.4159 21.1094 13.5996 21.1094H15.8119C15.9957 21.1094 16.1448 20.9603 16.1448 20.7764C16.1448 19.3657 17.672 18.4836 18.8939 19.1891C19.0531 19.281 19.2566 19.2264 19.3485 19.0673L20.4548 17.1512C20.5465 16.9923 20.4921 16.7888 20.3329 16.6968C19.1119 15.9919 19.1106 14.2287 20.3325 13.5233C20.4913 13.4316 20.5458 13.2285 20.4541 13.0696L19.3474 11.1528C19.2556 10.9938 19.0523 10.9394 18.8934 11.0312C17.6715 11.7366 16.1448 10.8542 16.1448 9.44397C16.1448 9.2601 15.9957 9.11114 15.8121 9.11114L13.5994 9.11115C13.4158 9.11115 13.267 9.25997 13.267 9.44355C13.267 10.8543 11.7397 11.7356 10.5183 11.0304C10.3592 10.9385 10.1558 10.9931 10.064 11.1521L8.95773 13.0682C8.86583 13.2273 8.92037 13.4308 9.07953 13.5227C10.3018 14.2284 10.3006 15.9922 9.07916 16.6974Z' fill='%23323544'/%3E %3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M4.25315 5.39728C5.24418 5.9627 6.47801 5.25034 6.48385 4.10938L7.98373 4.10938C7.98956 5.25038 9.22343 5.96275 10.2145 5.3973L10.9635 6.6946C11.3812 6.46162 11.8798 6.30786 12.3876 6.21697C12.3568 6.12702 12.3169 6.03871 12.2675 5.95326L11.5095 4.64028C11.0998 3.93076 10.1954 3.68503 9.48364 4.0873C9.47615 3.26978 8.81111 2.60938 7.99183 2.60938H6.47573C5.65647 2.60938 4.99145 3.26976 4.98393 4.08724C4.27222 3.68501 3.3678 3.93074 2.95817 4.64024L2.20012 5.95323C1.79048 6.66275 2.0299 7.56889 2.73413 7.98413C2.0299 8.39938 1.7905 9.30551 2.20013 10.015L2.95819 11.328C3.36782 12.0375 4.27222 12.2832 4.98394 11.881C4.98962 12.4994 5.37154 13.0279 5.91185 13.2486C5.909 12.6779 6.05286 12.0988 6.35883 11.5689L6.4266 11.4515C6.17233 10.5593 5.11989 10.0765 4.25316 10.571L3.50323 9.27204C4.48844 8.69649 4.48842 7.27175 3.50321 6.69621L4.25315 5.39728Z' fill='%23323544'/%3E %3Cpath d='M7.23401 9.48438C8.06244 9.48438 8.73401 8.8128 8.73401 7.98438C8.73401 7.15595 8.06244 6.48438 7.23401 6.48438C6.40558 6.48438 5.73401 7.15595 5.73401 7.98438C5.73401 8.8128 6.40558 9.48438 7.23401 9.48438Z' fill='%23323544'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.6406 15.1107C11.6406 13.418 13.0129 12.0457 14.7056 12.0457C16.3984 12.0457 17.7706 13.418 17.7706 15.1107C17.7706 16.8035 16.3984 18.1757 14.7056 18.1757C13.0129 18.1757 11.6406 16.8035 11.6406 15.1107ZM14.7056 13.5457C13.8413 13.5457 13.1406 14.2464 13.1406 15.1107C13.1406 15.975 13.8413 16.6757 14.7056 16.6757C15.57 16.6757 16.2706 15.975 16.2706 15.1107C16.2706 14.2464 15.57 13.5457 14.7056 13.5457Z' fill='%23323544'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.65797 17.9026C7.15164 17.0256 7.45257 15.9045 8.32916 15.3984C8.55144 15.27 8.55094 14.9496 8.32953 14.8218C7.45293 14.3157 7.15258 13.1948 7.65869 12.3182L8.76495 10.4021C9.27102 9.52553 10.3919 9.22535 11.2683 9.73135C11.49 9.85937 11.767 9.69928 11.767 9.44355C11.767 8.43154 12.5874 7.61115 13.5994 7.61115H15.8121C16.8245 7.61115 17.6448 8.43199 17.6448 9.44397C17.6448 9.7002 17.9221 9.85987 18.1434 9.73212C19.0198 9.22613 20.1404 9.52641 20.6464 10.4028L21.7531 12.3196C22.259 13.1959 21.9588 14.3164 21.0825 14.8223C20.8615 14.9499 20.861 15.2697 21.0829 15.3978C21.9591 15.9037 22.26 17.0245 21.7538 17.9012L20.6475 19.8173C20.1414 20.6939 19.0205 20.9942 18.1439 20.4881C17.9222 20.3601 17.6448 20.5201 17.6448 20.7764C17.6448 21.7886 16.8243 22.6094 15.8119 22.6094H13.5996C12.5875 22.6094 11.767 21.7889 11.767 20.7768C11.767 20.5211 11.4899 20.3606 11.2678 20.4888C10.3913 20.9949 9.27006 20.6948 8.76384 19.818L7.65797 17.9026ZM9.07916 16.6974C8.91962 16.7895 8.86512 16.9935 8.957 17.1526L10.0629 19.068C10.1547 19.2271 10.3584 19.2818 10.5178 19.1898C11.7392 18.4846 13.267 19.3656 13.267 20.7768C13.267 20.9605 13.4159 21.1094 13.5996 21.1094H15.8119C15.9957 21.1094 16.1448 20.9603 16.1448 20.7764C16.1448 19.3657 17.672 18.4836 18.8939 19.1891C19.0531 19.281 19.2566 19.2264 19.3485 19.0673L20.4548 17.1512C20.5465 16.9923 20.4921 16.7888 20.3329 16.6968C19.1119 15.9919 19.1106 14.2287 20.3325 13.5233C20.4913 13.4316 20.5458 13.2285 20.4541 13.0696L19.3474 11.1528C19.2556 10.9938 19.0523 10.9394 18.8934 11.0312C17.6715 11.7366 16.1448 10.8542 16.1448 9.44397C16.1448 9.2601 15.9957 9.11114 15.8121 9.11114L13.5994 9.11115C13.4158 9.11115 13.267 9.25997 13.267 9.44355C13.267 10.8543 11.7397 11.7356 10.5183 11.0304C10.3592 10.9385 10.1558 10.9931 10.064 11.1521L8.95773 13.0682C8.86583 13.2273 8.92037 13.4308 9.07953 13.5227C10.3018 14.2284 10.3006 15.9922 9.07916 16.6974Z' fill='%23323544'/%3E %3C/svg%3E")}
.svc-icon[data-icon='lock']::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M10.5 16C10.5 15.1716 11.1716 14.5 12 14.5C12.8284 14.5 13.5 15.1716 13.5 16V17.5C13.5 18.3284 12.8284 19 12 19C11.1716 19 10.5 18.3284 10.5 17.5V16Z' fill='%23323544'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.75 7.25C6.75 4.3505 9.10051 2 12 2C14.8995 2 17.25 4.35051 17.25 7.25V9.125H18.5C19.7426 9.125 20.75 10.1324 20.75 11.375V17.2495C20.75 19.8729 18.6234 21.9995 16 21.9995H8C5.37665 21.9995 3.25 19.8729 3.25 17.2495V11.375C3.25 10.1324 4.25736 9.125 5.5 9.125H6.75V7.25ZM8.25 9.125H15.75V7.25C15.75 5.17893 14.0711 3.5 12 3.5C9.92893 3.5 8.25 5.17893 8.25 7.25V9.125ZM5.5 10.625C5.08579 10.625 4.75 10.9608 4.75 11.375V17.2495C4.75 19.0444 6.20507 20.4995 8 20.4995H16C17.7949 20.4995 19.25 19.0444 19.25 17.2495V11.375C19.25 10.9608 18.9142 10.625 18.5 10.625H5.5Z' fill='%23323544'/%3E %3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M10.5 16C10.5 15.1716 11.1716 14.5 12 14.5C12.8284 14.5 13.5 15.1716 13.5 16V17.5C13.5 18.3284 12.8284 19 12 19C11.1716 19 10.5 18.3284 10.5 17.5V16Z' fill='%23323544'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.75 7.25C6.75 4.3505 9.10051 2 12 2C14.8995 2 17.25 4.35051 17.25 7.25V9.125H18.5C19.7426 9.125 20.75 10.1324 20.75 11.375V17.2495C20.75 19.8729 18.6234 21.9995 16 21.9995H8C5.37665 21.9995 3.25 19.8729 3.25 17.2495V11.375C3.25 10.1324 4.25736 9.125 5.5 9.125H6.75V7.25ZM8.25 9.125H15.75V7.25C15.75 5.17893 14.0711 3.5 12 3.5C9.92893 3.5 8.25 5.17893 8.25 7.25V9.125ZM5.5 10.625C5.08579 10.625 4.75 10.9608 4.75 11.375V17.2495C4.75 19.0444 6.20507 20.4995 8 20.4995H16C17.7949 20.4995 19.25 19.0444 19.25 17.2495V11.375C19.25 10.9608 18.9142 10.625 18.5 10.625H5.5Z' fill='%23323544'/%3E %3C/svg%3E")}
.svc-icon[data-icon='grid']::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M3.5 5.25C3.5 4.83579 3.16421 4.5 2.75 4.5C2.33579 4.5 2 4.83579 2 5.25V17.25C2 18.4926 3.00736 19.5 4.25 19.5H21.25C21.6642 19.5 22 19.1642 22 18.75C22 18.3358 21.6642 18 21.25 18H4.25C3.83579 18 3.5 17.6642 3.5 17.25V5.25Z' fill='%23323544'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 10.2773C5.89543 10.2773 5 11.1728 5 12.2773V15.7501C5 16.1643 5.33579 16.5001 5.75 16.5001H8.25C8.66421 16.5001 9 16.1643 9 15.7501V12.2773C9 11.1728 8.10457 10.2773 7 10.2773ZM6.5 12.2773C6.5 12.0012 6.72386 11.7773 7 11.7773C7.27614 11.7773 7.5 12.0012 7.5 12.2773V15.0001H6.5V12.2773Z' fill='%23323544'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5 6.5C10.5 5.39543 11.3954 4.5 12.5 4.5C13.6046 4.5 14.5 5.39543 14.5 6.5V15.7501C14.5 16.1643 14.1642 16.5001 13.75 16.5001H11.25C10.8358 16.5001 10.5 16.1643 10.5 15.7501V6.5ZM12.5 6C12.2239 6 12 6.22386 12 6.5V15.0001H13V6.5C13 6.22386 12.7761 6 12.5 6Z' fill='%23323544'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 8.05859C16.8954 8.05859 16 8.95402 16 10.0586V15.7501C16 16.1643 16.3358 16.5001 16.75 16.5001H19.25C19.6642 16.5001 20 16.1643 20 15.7501V10.0586C20 8.95402 19.1046 8.05859 18 8.05859ZM17.5 10.0586C17.5 9.78245 17.7239 9.55859 18 9.55859C18.2761 9.55859 18.5 9.78245 18.5 10.0586V15.0001H17.5V10.0586Z' fill='%23323544'/%3E %3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M3.5 5.25C3.5 4.83579 3.16421 4.5 2.75 4.5C2.33579 4.5 2 4.83579 2 5.25V17.25C2 18.4926 3.00736 19.5 4.25 19.5H21.25C21.6642 19.5 22 19.1642 22 18.75C22 18.3358 21.6642 18 21.25 18H4.25C3.83579 18 3.5 17.6642 3.5 17.25V5.25Z' fill='%23323544'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 10.2773C5.89543 10.2773 5 11.1728 5 12.2773V15.7501C5 16.1643 5.33579 16.5001 5.75 16.5001H8.25C8.66421 16.5001 9 16.1643 9 15.7501V12.2773C9 11.1728 8.10457 10.2773 7 10.2773ZM6.5 12.2773C6.5 12.0012 6.72386 11.7773 7 11.7773C7.27614 11.7773 7.5 12.0012 7.5 12.2773V15.0001H6.5V12.2773Z' fill='%23323544'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5 6.5C10.5 5.39543 11.3954 4.5 12.5 4.5C13.6046 4.5 14.5 5.39543 14.5 6.5V15.7501C14.5 16.1643 14.1642 16.5001 13.75 16.5001H11.25C10.8358 16.5001 10.5 16.1643 10.5 15.7501V6.5ZM12.5 6C12.2239 6 12 6.22386 12 6.5V15.0001H13V6.5C13 6.22386 12.7761 6 12.5 6Z' fill='%23323544'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 8.05859C16.8954 8.05859 16 8.95402 16 10.0586V15.7501C16 16.1643 16.3358 16.5001 16.75 16.5001H19.25C19.6642 16.5001 20 16.1643 20 15.7501V10.0586C20 8.95402 19.1046 8.05859 18 8.05859ZM17.5 10.0586C17.5 9.78245 17.7239 9.55859 18 9.55859C18.2761 9.55859 18.5 9.78245 18.5 10.0586V15.0001H17.5V10.0586Z' fill='%23323544'/%3E %3C/svg%3E")}
.svc-icon[data-icon='mentor']::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12.2977 3.30965C12.1077 3.22751 11.8923 3.22751 11.7023 3.30965L2.45232 7.30965C2.17775 7.42838 2 7.69891 2 7.99805C2 8.29718 2.17775 8.56771 2.45232 8.68644L5.125 9.84219V15.9259C5.125 16.0717 5.16749 16.2143 5.24727 16.3363L5.875 15.9259C5.24727 16.3363 5.24706 16.336 5.24727 16.3363L5.24814 16.3376L5.2492 16.3392L5.25188 16.3433L5.25947 16.3546C5.26553 16.3636 5.27359 16.3753 5.28365 16.3897C5.30378 16.4184 5.33196 16.4577 5.36827 16.5059C5.44085 16.6023 5.54621 16.735 5.68494 16.8917C5.96196 17.2047 6.375 17.6169 6.9293 18.0282C8.04166 18.8535 9.72592 19.6759 12 19.6759C14.2741 19.6759 15.9583 18.8535 17.0707 18.0282C17.625 17.6169 18.038 17.2047 18.3151 16.8917C18.4538 16.735 18.5591 16.6023 18.6317 16.5059C18.668 16.4577 18.6962 16.4184 18.7163 16.3897C18.7264 16.3753 18.7345 16.3636 18.7405 16.3546L18.7481 16.3433L18.7508 16.3392L18.7519 16.3376C18.7521 16.3373 18.7527 16.3363 18.125 15.9259L18.7527 16.3363C18.8325 16.2143 18.875 16.0717 18.875 15.9259V9.84219L20.5 9.13949V14.7188C20.5 15.133 20.8358 15.4688 21.25 15.4688C21.6642 15.4688 22 15.133 22 14.7188V8C22 7.99967 22 8.00033 22 8C22 7.99968 22 7.99837 22 7.99805C22 7.69891 21.8222 7.42838 21.5477 7.30965L12.2977 3.30965ZM17.375 10.4908V15.6793C17.3276 15.7392 17.2666 15.8131 17.1919 15.8975C16.971 16.1471 16.6334 16.4848 16.1769 16.8236C15.2676 17.4982 13.8894 18.1759 12 18.1759C10.1106 18.1759 8.73237 17.4982 7.8231 16.8236C7.36658 16.4848 7.02902 16.1471 6.80814 15.8975C6.73344 15.8131 6.67243 15.7392 6.625 15.6793V10.4908L11.7023 12.6864C11.8923 12.7686 12.1077 12.7686 12.2977 12.6864L17.375 10.4908ZM12 11.1809L4.63959 7.99805L12 4.81517L19.3604 7.99805L12 11.1809Z' fill='%23323544'/%3E %3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12.2977 3.30965C12.1077 3.22751 11.8923 3.22751 11.7023 3.30965L2.45232 7.30965C2.17775 7.42838 2 7.69891 2 7.99805C2 8.29718 2.17775 8.56771 2.45232 8.68644L5.125 9.84219V15.9259C5.125 16.0717 5.16749 16.2143 5.24727 16.3363L5.875 15.9259C5.24727 16.3363 5.24706 16.336 5.24727 16.3363L5.24814 16.3376L5.2492 16.3392L5.25188 16.3433L5.25947 16.3546C5.26553 16.3636 5.27359 16.3753 5.28365 16.3897C5.30378 16.4184 5.33196 16.4577 5.36827 16.5059C5.44085 16.6023 5.54621 16.735 5.68494 16.8917C5.96196 17.2047 6.375 17.6169 6.9293 18.0282C8.04166 18.8535 9.72592 19.6759 12 19.6759C14.2741 19.6759 15.9583 18.8535 17.0707 18.0282C17.625 17.6169 18.038 17.2047 18.3151 16.8917C18.4538 16.735 18.5591 16.6023 18.6317 16.5059C18.668 16.4577 18.6962 16.4184 18.7163 16.3897C18.7264 16.3753 18.7345 16.3636 18.7405 16.3546L18.7481 16.3433L18.7508 16.3392L18.7519 16.3376C18.7521 16.3373 18.7527 16.3363 18.125 15.9259L18.7527 16.3363C18.8325 16.2143 18.875 16.0717 18.875 15.9259V9.84219L20.5 9.13949V14.7188C20.5 15.133 20.8358 15.4688 21.25 15.4688C21.6642 15.4688 22 15.133 22 14.7188V8C22 7.99967 22 8.00033 22 8C22 7.99968 22 7.99837 22 7.99805C22 7.69891 21.8222 7.42838 21.5477 7.30965L12.2977 3.30965ZM17.375 10.4908V15.6793C17.3276 15.7392 17.2666 15.8131 17.1919 15.8975C16.971 16.1471 16.6334 16.4848 16.1769 16.8236C15.2676 17.4982 13.8894 18.1759 12 18.1759C10.1106 18.1759 8.73237 17.4982 7.8231 16.8236C7.36658 16.4848 7.02902 16.1471 6.80814 15.8975C6.73344 15.8131 6.67243 15.7392 6.625 15.6793V10.4908L11.7023 12.6864C11.8923 12.7686 12.1077 12.7686 12.2977 12.6864L17.375 10.4908ZM12 11.1809L4.63959 7.99805L12 4.81517L19.3604 7.99805L12 11.1809Z' fill='%23323544'/%3E %3C/svg%3E")}

/* ══════════ 15 · FLECHA "VOLVER ARRIBA" (FLOTANTE, aparece al scroll) ══════════ */
.to-top{
  position:fixed;left:20px;bottom:22px;z-index:70;
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:var(--white);
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--gbrd);box-shadow:var(--clay);
  /* `visibility:hidden` saca el botón del pintado mientras está oculto. Con sólo
     opacity:0 el navegador seguía evaluando su backdrop-filter en cada fotograma
     sobre el canvas de partículas: coste continuo por un elemento invisible.
     El retardo de .3s en `visibility` deja terminar la transición de salida. */
  opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;visibility:hidden;
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,
             visibility 0s linear .3s;
}
.to-top.show{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
.to-top span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.to-top svg{width:24px;height:24px;fill:var(--nc);filter:drop-shadow(0 0 8px rgba(40,232,255,.65))}
/* El bamboleo sólo mientras el botón se ve: si no, animaba un elemento oculto. */
.to-top.show svg{animation:bobUp 1.8s ease-in-out infinite}
.to-top.show:hover{transform:translateY(-3px);box-shadow:var(--clay),0 16px 34px -10px rgba(40,232,255,.55)}
@keyframes bobUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (max-width:600px){.to-top{left:14px;bottom:14px;width:48px;height:48px}}
@media (prefers-reduced-motion:reduce){.to-top.show svg{animation:none}}

/* ══════════ 16 · REVEAL más notorio (secciones aparecen al hacer scroll) ══════════ */
.js .reveal{opacity:0;transform:translateY(40px) scale(.985);
  transition:opacity .7s ease,transform .75s cubic-bezier(.2,.75,.25,1)}
.js .reveal.in{opacity:1;transform:none}

/* ══════════ 17 · FONDO: ESTRELLAS FUGACES + campo estelar ══════════ */
.bg-aurora{opacity:.72}
.bg-stars{opacity:.95}
.bg-shooting{overflow:hidden}
.bg-shooting i{
  position:absolute;width:2px;height:130px;border-radius:2px;
  background:linear-gradient(180deg,rgba(226,244,255,0),rgba(226,244,255,.95));
  filter:drop-shadow(0 0 7px rgba(150,210,255,.8));
  transform:rotate(215deg);opacity:0;will-change:transform,opacity;
}
.bg-shooting i:nth-child(1){top:6%;left:80%;animation:shoot 8s ease-in 1.2s infinite}
.bg-shooting i:nth-child(2){top:1%;left:54%;height:96px;animation:shoot 12s ease-in 5.5s infinite}
.bg-shooting i:nth-child(3){top:13%;left:68%;height:150px;animation:shoot 16s ease-in 9.5s infinite}
@keyframes shoot{
  0%{opacity:0;transform:translate(0,0) rotate(215deg)}
  4%{opacity:1}
  15%{opacity:1}
  22%{opacity:0;transform:translate(-46vw,62vh) rotate(215deg)}
  100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){.bg-shooting i{animation:none;opacity:0}}

/* ══════════ 18 · FONDO: RED DE PARTÍCULAS ("circuito") ══════════ */
.bg-net{position:absolute;inset:0;width:100%;height:100%;opacity:.92}
.bg-shooting{display:none}   /* la red de partículas es el motivo principal */
.bg-grid{display:none}
.bg-aurora{opacity:.5}       /* nebulosa sutil, para no competir con el circuito */

/* ══════════ 19 · HOVER LEGIBLE PARA BANNERS COMERCIALES ══════════ */
:root{
  --epic-panel:linear-gradient(145deg,rgba(7,13,30,.82),rgba(12,22,48,.70) 48%,rgba(26,18,48,.58));
  --epic-ring:linear-gradient(135deg,rgba(40,232,255,.88),rgba(162,116,255,.72),rgba(255,122,60,.66));
  --epic-spot:radial-gradient(340px 300px at var(--mx,50%) var(--my,50%),rgba(57,255,200,.105),rgba(40,232,255,.075) 36%,transparent 68%);
}
.about-card,.cta-band{isolation:isolate}
.about-card>*,.cta-band>*{position:relative;z-index:1}
.about-card::after,.cta-band::after{z-index:0;opacity:.42}
.about-card:hover,.cta-band:hover{
  border-color:transparent;
  color:#e8f4ff;
  background:
    var(--epic-spot) padding-box,
    var(--epic-panel) padding-box,
    var(--epic-ring) border-box;
  box-shadow:
    inset 0 1px 0 rgba(230,248,255,.20),
    inset 0 -22px 44px rgba(2,5,16,.30),
    0 24px 58px -28px rgba(40,232,255,.45),
    0 12px 36px -24px rgba(162,116,255,.55);
}
.about-card:hover::after,.cta-band:hover::after{opacity:.28}
.about-card p,.cta-band p{
  text-wrap:pretty;
  text-shadow:0 1px 12px rgba(2,6,18,.34);
}
.about-card:hover p,.cta-band:hover p{
  color:#eaf6ff;
  text-shadow:0 1px 14px rgba(0,0,0,.55);
}
.impact-word{
  font-weight:800;
  color:#eefaff;
  background:linear-gradient(90deg,#f7fbff 0%,var(--nc) 48%,var(--nm) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 8px rgba(40,232,255,.34));
}
.cta-band .impact-word{
  background:linear-gradient(90deg,#ffffff 0%,var(--nm) 45%,var(--no) 100%);
  -webkit-background-clip:text;background-clip:text;
}

/* ══════════ 19 · PROYECTOS DE REFERENCIA (franja + tarjetas) ══════════
   Enlaces a sistemas propios en producción. Reglas que se respetan aquí:
   · Sólo se animan `transform` y `opacity` (capa de composición): ni sombras
     ni filtros en bucle, para no repintar en cada fotograma en móvil.
   · Los efectos de elevación se limitan a punteros finos con hover real; en
     táctil se sustituyen por realimentación de pulsación (:active).
   · Tipografía y rejilla fluidas con clamp()/auto-fit: una sola definición
     sirve de 320 px a escritorio, sin puntos de ruptura por dispositivo.
   · Objetivo táctil mínimo 44×44 px y foco visible siempre (ISO 9241-171).
   ══════════════════════════════════════════════════════════════════════ */

/* ---- Franja bajo el hero ---- */
.projects-strip{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:8px clamp(16px,4vw,48px) clamp(18px,3vw,34px);text-align:center;
}
.ps-lead{
  margin:0;font-family:var(--font-head);font-size:.78rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--nc);opacity:.85;
}
.ps-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%}

/* ---- Pastilla compacta ---- */
.pc-pill{
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding:10px 18px;border-radius:999px;
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--gbrd);color:var(--text);text-decoration:none;
  transition:transform .22s cubic-bezier(.2,.7,.2,1),border-color .22s ease,box-shadow .22s ease;
}
.pc-pill-name{font-family:var(--font-display);font-weight:700;letter-spacing:.02em}
.pc-pill-dom{font-family:var(--font-mono);font-size:.8rem;color:var(--nc);opacity:.9}
.pc-arrow{display:inline-block;color:var(--cyan);font-weight:700;line-height:1;
  transition:transform .22s cubic-bezier(.2,.7,.2,1)}

/* ---- Sección de cierre ---- */
.projects{padding:clamp(48px,7vw,96px) clamp(16px,5vw,64px);max-width:1120px;margin-inline:auto}
.projects-head{text-align:center;margin-bottom:clamp(26px,4vw,44px)}
.projects-head h2{font-family:var(--font-display);font-size:clamp(1.7rem,4.4vw,2.6rem);margin:.25em 0}
.projects-sub{color:var(--text);opacity:.85;max-width:58ch;margin-inline:auto}

/* auto-fit + minmax(min(100%,…)) => nunca desborda en 320 px, ni deja huecos. */
.projects-grid{
  display:grid;gap:clamp(14px,2.2vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}

/* ---- Tarjeta ---- */
.pc-card{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;gap:8px;
  min-height:150px;padding:clamp(18px,2.4vw,26px);
  border-radius:var(--radius);border:1px solid var(--gbrd);
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--clay);color:var(--text);text-decoration:none;
  transition:transform .26s cubic-bezier(.2,.7,.2,1),border-color .26s ease,box-shadow .26s ease;
}
/* Destello diagonal: se mueve con transform, no repinta el fondo. */
.pc-card::before{
  content:"";position:absolute;inset:-40% -60%;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(40,232,255,.16) 50%,transparent 58%);
  transform:translateX(-58%);opacity:0;
  transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .3s ease;
}
.pc-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pc-name{font-family:var(--font-display);font-size:clamp(1.15rem,2.4vw,1.4rem);font-weight:700}
.pc-domain{font-family:var(--font-mono);font-size:.85rem;color:var(--cyan);word-break:break-all}
.pc-desc{margin-top:2px;font-size:.95rem;opacity:.88;line-height:1.5}
.pc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:10px}
.pc-tag{
  font-family:var(--font-head);font-size:.72rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:5px 10px;border-radius:999px;
  border:1px solid var(--gbrd);color:var(--nc);
}

/* ---- Foco: siempre visible, nunca dependiente del color solo ---- */
.pc-pill:focus-visible,.pc-card:focus-visible{
  outline:2px solid var(--cyan);outline-offset:3px;border-color:var(--cyan);
}

/* ---- Elevación sólo donde hay hover real (escritorio) ---- */
@media (hover:hover) and (pointer:fine){
  .pc-pill:hover{transform:translateY(-2px);border-color:var(--cyan);
    box-shadow:0 10px 26px -12px rgba(40,232,255,.6)}
  .pc-pill:hover .pc-arrow{transform:translate(3px,-3px)}
  .pc-card:hover{transform:translateY(-6px);border-color:var(--cyan);
    box-shadow:var(--clay),0 22px 48px -20px rgba(40,232,255,.55)}
  .pc-card:hover::before{transform:translateX(58%);opacity:1}
  .pc-card:hover .pc-arrow{transform:translate(3px,-3px)}
}

/* ---- Táctil: sin blur (coste de repintado) y con respuesta al toque ---- */
@media (pointer:coarse){
  .pc-pill,.pc-card{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--glass-hi)}
  .pc-pill:active,.pc-card:active{transform:scale(.985)}
}

@media (max-width:600px){
  .ps-row{gap:10px}
  .pc-pill{padding:10px 14px;gap:8px}
  .pc-pill-dom{display:none}   /* el dominio ya va en el aria-label */
}

@media (prefers-reduced-motion:reduce){
  .pc-pill,.pc-card,.pc-arrow,.pc-card::before{transition:none}
  .pc-card::before{display:none}
}