/* ═══════════════════════════════════════════════════════
   GROWTH ARENA AGENCY — styles.css v20260612
   Archetype: Mouse-Reactive Gradient / Dark Premium
   ═══════════════════════════════════════════════════════ */

/* ── 1. Tokens ────────────────────────────────────────── */
:root {
  --orange:     #F26522;
  --orange-2:   #D94F0A;
  --orange-glow:rgba(242,101,34,.35);
  --blue:       #003DA5;
  --blue-2:     #002A75;
  --blue-3:     #001540;
  --white:      #FFFFFF;
  --cream:      #F7F5F2;
  --off:        #EEECEA;
  --ink:        #1A1A1E;
  --ink-soft:   #2E2E34;
  --muted:      #6B6B75;

  --sans: 'DM Sans', system-ui, sans-serif;
  --disp: 'Bebas Neue', sans-serif;

  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.25,.46,.45,.94);
  --ease-bck:  cubic-bezier(.34,1.56,.64,1);

  --nav-h: 68px;
  --wrap:  min(1180px, 100% - 48px);
  --r:     12px;
}

/* ── 2. Reset ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);font-size:16px;line-height:1.65;
  color:var(--ink);background:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;cursor:none;
}
img,svg,video{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;cursor:none;border:0;background:none}
a{color:inherit;text-decoration:none;cursor:none}
p{text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance;line-height:1.06}
ul{list-style:none}
::selection{background:var(--orange);color:#fff}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}

.skip-link{
  position:fixed;top:-100px;left:1rem;
  padding:.5rem 1rem;background:var(--orange);color:#fff;
  z-index:9999;border-radius:8px;font-size:14px;font-weight:600;
}
.skip-link:focus{top:1rem}

/* ── 3. Layout ────────────────────────────────────────── */
.wrap{width:var(--wrap);margin-inline:auto}

/* ── 4. Typography helpers ────────────────────────────── */
.eyebrow{
  display:block;font-size:11px;font-weight:600;
  letter-spacing:3px;text-transform:uppercase;
  color:var(--orange);margin-bottom:16px;
}
.eyebrow--orange{color:var(--orange)}
.kicker{
  font-size:11px;font-weight:600;letter-spacing:3px;
  text-transform:uppercase;color:var(--orange);margin-bottom:20px;
}
.body-l{font-size:16px;font-weight:300;line-height:1.85;color:rgba(255,255,255,.65);margin-bottom:20px}

/* ── 5. Buttons ───────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;font-family:var(--sans);font-size:14px;font-weight:600;
  letter-spacing:.3px;padding:13px 28px;border-radius:8px;
  position:relative;overflow:hidden;
  transition:transform .25s var(--ease-out),box-shadow .25s,background .2s;
}
.btn::after{
  content:'';position:absolute;inset:0;
  background:rgba(255,255,255,.1);opacity:0;transition:opacity .2s;
}
.btn:hover::after{opacity:1}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn--primary{
  background:var(--orange);color:#fff;
  box-shadow:0 4px 24px var(--orange-glow);
}
.btn--primary:hover{box-shadow:0 8px 36px rgba(242,101,34,.55)}
.btn--ghost{
  background:rgba(255,255,255,.07);color:#fff;
  border:1px solid rgba(255,255,255,.18);
}
.btn--ghost:hover{background:rgba(255,255,255,.13)}
.btn--lg{padding:17px 40px;font-size:16px}
.btn--full{width:100%}

/* ── 6. Scroll progress ───────────────────────────────── */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;
  z-index:500;pointer-events:none;
}
[data-scroll-bar]{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--orange),var(--blue));
  transform-origin:0 0;transform:scaleX(0);
  transition:transform .08s linear;
}

/* ── 7. Cursor ────────────────────────────────────────── */
.cursor{
  position:fixed;top:0;left:0;pointer-events:none;
  z-index:10000;opacity:0;transition:opacity .3s;
  display:none;
}
.cursor.is-ready{opacity:1}
@media(hover:hover) and (pointer:fine){.cursor{display:block}}
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;will-change:transform}
.cursor-dot{
  width:5px;height:5px;margin:-2.5px;
  background:var(--orange);border-radius:50%;
}
.cursor-ring{
  width:34px;height:34px;margin:-17px;
  border:1.5px solid rgba(242,101,34,.6);border-radius:50%;
  transition:width .3s var(--ease-out),height .3s var(--ease-out),
             margin .3s var(--ease-out),border-color .3s;
}
.cursor.is-interactive .cursor-ring{
  width:52px;height:52px;margin:-26px;border-color:var(--orange);
}

/* ── 8. Splash ────────────────────────────────────────── */
.splash{
  position:fixed;inset:0;z-index:9000;
  background:var(--ink);
  display:grid;place-items:center;
  pointer-events:auto;
  transition:opacity .9s var(--ease-out),transform 1s var(--ease-soft);
  animation:splashSafe .01s 4.5s forwards;
}
@keyframes splashSafe{to{opacity:0;pointer-events:none;visibility:hidden}}
.splash.is-out{opacity:0;transform:translateY(-8px);pointer-events:none}
.splash-inner{display:flex;flex-direction:column;align-items:center;gap:20px}
.splash-logo{
  font-family:var(--disp);font-size:clamp(32px,8vw,56px);
  letter-spacing:4px;color:#fff;
}
.splash-logo span{color:var(--orange)}
.splash-line{
  width:0;height:1px;background:var(--orange);
  animation:splashLineGrow .8s .2s var(--ease-out) forwards;
}
@keyframes splashLineGrow{to{width:120px}}

/* ── 9. Nav ───────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nav-h);
  transition:background .4s,backdrop-filter .4s,border-bottom .4s;
}
.nav.is-scrolled{
  background:rgba(10,10,14,.88);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-wrap{
  height:100%;display:flex;align-items:center;
  justify-content:space-between;
  width:var(--wrap);margin-inline:auto;
}
.nav-brand{
  font-family:var(--disp);font-size:20px;letter-spacing:2.5px;color:#fff;
}
.nav-brand span{color:var(--orange)}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-link{
  font-size:13px;font-weight:500;color:rgba(255,255,255,.65);
  transition:color .2s;
}
.nav-link:hover{color:#fff}
.nav-cta{
  font-size:13px;font-weight:600;color:#fff;
  background:var(--orange);padding:9px 20px;border-radius:7px;
  transition:transform .2s,box-shadow .2s;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 4px 20px var(--orange-glow)}

.burger{
  display:none;flex-direction:column;gap:5px;
  padding:6px;border-radius:6px;
}
.burger span{
  display:block;width:22px;height:2px;
  background:#fff;border-radius:2px;
  transition:transform .3s,opacity .3s;
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-drawer{
  display:none;position:fixed;
  top:var(--nav-h);left:0;right:0;
  background:rgba(10,10,14,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:24px var(--wrap) 32px;
  flex-direction:column;gap:4px;
  transform:translateY(-6px);opacity:0;pointer-events:none;
  transition:transform .3s var(--ease-out),opacity .3s;
}
.nav-drawer.is-open{transform:translateY(0);opacity:1;pointer-events:all}
.drawer-link{
  display:block;padding:12px 16px;
  font-size:16px;font-weight:500;color:rgba(255,255,255,.75);
  border-radius:8px;transition:background .2s,color .2s;
}
.drawer-link:hover{background:rgba(255,255,255,.06);color:#fff}
.drawer-cta{color:var(--orange)}

/* ── 10. Reveal ───────────────────────────────────────── */
[data-reveal]{
  opacity:0;transform:translateY(28px);
  transition:opacity .75s var(--ease-out),transform .75s var(--ease-out);
  transition-delay:var(--rd,0s);
}
[data-reveal].is-revealed{opacity:1;transform:none}
/* Defensive: elements with data-split must never be hidden by reveal */
[data-reveal][data-split]{opacity:1;transform:none}

/* ── 11. HERO ─────────────────────────────────────────── */
.hero{
  min-height:100svh;display:flex;align-items:center;
  position:relative;overflow:hidden;
  padding-top:var(--nav-h);
}
.hero-canvas{position:absolute;inset:0;z-index:0}

.hero-glow{
  position:absolute;border-radius:50%;
  filter:blur(80px);pointer-events:none;
}
.hero-glow--blue{
  width:700px;height:700px;
  top:-15%;right:-10%;
  background:radial-gradient(circle,rgba(0,61,165,.55),transparent 65%);
  animation:glowDrift 10s ease-in-out infinite alternate;
}
.hero-glow--orange{
  width:500px;height:500px;
  bottom:-10%;left:-5%;
  background:radial-gradient(circle,rgba(242,101,34,.3),transparent 65%);
  animation:glowDrift 14s ease-in-out infinite alternate-reverse;
}
@keyframes glowDrift{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(40px,-30px) scale(1.1)}
}

.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%);
}
.hero-grain{
  position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
.particles-wrap{position:absolute;inset:0;overflow:hidden}
.pt{
  position:absolute;border-radius:50%;pointer-events:none;
  animation:ptRise linear infinite;
}
@keyframes ptRise{
  0%{transform:translateY(0) translateX(0);opacity:0}
  8%{opacity:1}
  92%{opacity:.5}
  100%{transform:translateY(-110vh) translateX(var(--dx));opacity:0}
}

.hero-body{
  position:relative;z-index:1;
  width:var(--wrap);margin-inline:auto;
  padding-block:100px 80px;
}
.hero-h1{
  font-family:var(--disp);
  font-size:clamp(68px,11vw,136px);
  line-height:.92;letter-spacing:1px;
  color:#fff;margin-block:24px 28px;
  display:flex;flex-direction:column;
}
.h1-line--accent{color:var(--orange)}
.hero-sub{
  font-size:clamp(15px,1.5vw,18px);font-weight:300;
  color:rgba(255,255,255,.68);
  max-width:540px;line-height:1.8;margin-bottom:40px;
}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:72px}

.hero-stats{
  display:flex;align-items:center;flex-wrap:wrap;gap:24px;
  padding-top:32px;border-top:1px solid rgba(255,255,255,.1);
}
.stat{display:flex;flex-direction:column;gap:4px}
.stat-n{
  font-family:var(--disp);font-size:48px;
  color:var(--orange);line-height:1;
}
.stat-n+sup{font-family:var(--disp);font-size:28px;color:var(--orange);line-height:1}
.stat span{font-size:12px;color:rgba(255,255,255,.4);max-width:110px;line-height:1.4}
.stat-rule{width:1px;height:52px;background:rgba(255,255,255,.1);flex-shrink:0}

.scroll-cue{
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;z-index:1;
}
.scroll-cue-text{
  font-size:9px;letter-spacing:4px;text-transform:uppercase;
  color:rgba(255,255,255,.28);
}
.scroll-cue-line{
  width:1px;height:36px;
  background:linear-gradient(to bottom,rgba(255,255,255,.3),transparent);
  animation:cueAnim 2s ease-in-out infinite;
}
@keyframes cueAnim{
  0%,100%{transform:scaleY(1);opacity:.5}
  50%{transform:scaleY(1.4);opacity:1}
}

/* Mouse-reactive gradient on hero */
.hero{--mx:50%;--my:50%}
.hero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(
    600px circle at var(--mx) var(--my),
    rgba(242,101,34,.08),transparent 50%
  );
  transition:background .1s;
}

/* ── 12. Sections shared ──────────────────────────────── */
.s-header{max-width:600px;margin-bottom:64px}
.s-header h2,.s-header--light h2{
  font-family:var(--disp);
  font-size:clamp(36px,5vw,60px);
  line-height:1.03;letter-spacing:.5px;
}
.s-header h2{color:var(--ink)}
.s-header--light h2{color:#fff}

/* ── 13. Problema ─────────────────────────────────────── */
.s-problema{background:var(--cream);padding:120px 0}
.problema-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.p-card{
  background:#fff;border-radius:var(--r);padding:40px 32px;
  border-left:4px solid var(--orange);
  transition:transform .3s var(--ease-out),box-shadow .3s;
  will-change:transform;
}
.p-card:hover{transform:translateY(-5px);box-shadow:0 20px 56px rgba(0,0,0,.1)}
.p-num{
  font-family:var(--disp);font-size:60px;color:var(--orange);
  line-height:1;margin-bottom:12px;
}
.p-card h3{
  font-family:var(--disp);font-size:22px;letter-spacing:.5px;
  color:var(--blue);margin-bottom:12px;
}
.p-card p{font-size:14px;color:var(--muted);line-height:1.75}

/* ── 14. Sistema ──────────────────────────────────────── */
.s-sistema{background:var(--ink);padding:120px 0}
.sistema-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:80px;align-items:center;
}
.sistema-text h2{
  font-family:var(--disp);
  font-size:clamp(40px,5vw,62px);
  color:#fff;margin-bottom:28px;letter-spacing:.5px;
}
.sistema-text h2 em{color:var(--orange);font-style:normal}

/* Orb visual */
.sistema-orb-wrap{display:flex;align-items:center;justify-content:center}
.orb-scene{position:relative;width:340px;height:340px}
.orb{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,
    rgba(0,61,165,.9),rgba(242,101,34,.5) 60%,rgba(0,21,64,.95));
  box-shadow:
    0 0 60px rgba(0,61,165,.5),
    0 0 120px rgba(242,101,34,.2),
    inset 0 0 30px rgba(255,255,255,.06);
  animation:orbPulse 5s ease-in-out infinite alternate;
}
@keyframes orbPulse{
  0%{transform:translate(-50%,-50%) scale(1);
     box-shadow:0 0 60px rgba(0,61,165,.5),0 0 120px rgba(242,101,34,.2)}
  100%{transform:translate(-50%,-50%) scale(1.08);
       box-shadow:0 0 100px rgba(0,61,165,.7),0 0 200px rgba(242,101,34,.3)}
}
.orb-ring{
  position:absolute;top:50%;left:50%;
  border-radius:50%;border:1px solid rgba(242,101,34,.25);
  transform:translate(-50%,-50%);
}
.orb-ring--1{
  width:240px;height:240px;
  animation:ringRotate 12s linear infinite;
}
.orb-ring--2{
  width:310px;height:310px;border-color:rgba(0,61,165,.3);
  animation:ringRotate 20s linear infinite reverse;
}
@keyframes ringRotate{to{transform:translate(-50%,-50%) rotate(360deg)}}

.orb-tag{
  position:absolute;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  border-radius:8px;padding:8px 14px;
  font-size:12px;font-weight:500;color:#fff;
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  animation:tagFloat 6s ease-in-out infinite alternate;
}
.orb-tag span{font-size:14px}
.orb-tag--1{top:4%;left:0;   animation-delay:0s;   --ty:-10px}
.orb-tag--2{top:14%;right:0; animation-delay:1.5s; --ty:-7px}
.orb-tag--3{bottom:18%;left:2%;animation-delay:.8s; --ty:9px}
.orb-tag--4{bottom:6%;right:4%;animation-delay:2s;  --ty:7px}
@keyframes tagFloat{0%{transform:translateY(0)}100%{transform:translateY(var(--ty,-8px))}}

/* ── 15. Servicios ────────────────────────────────────── */
.s-servicios{background:var(--off);padding:120px 0}
.s-servicios .s-header h2{color:var(--blue)}
.s-servicios .eyebrow{color:var(--orange)}

.srv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.srv-card{
  background:#fff;border-radius:var(--r);padding:36px 28px;
  border:1.5px solid transparent;
  position:relative;overflow:hidden;
  transition:transform .3s var(--ease-out),box-shadow .3s,border-color .3s;
  will-change:transform;
}
.srv-card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--orange),var(--blue));
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease-out);
}
.srv-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 64px rgba(0,0,0,.1);
  border-color:rgba(242,101,34,.15);
}
.srv-card:hover::after{transform:scaleX(1)}
.srv-num{
  font-family:var(--disp);font-size:56px;
  color:rgba(0,61,165,.1);line-height:1;margin-bottom:16px;
}
.srv-card h3{
  font-family:var(--disp);font-size:22px;letter-spacing:.5px;
  color:var(--blue);margin-bottom:12px;
}
.srv-card p{font-size:14px;color:var(--muted);line-height:1.75;margin-bottom:20px}
.srv-tag{
  display:inline-block;font-size:10px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  color:var(--orange);background:rgba(242,101,34,.08);
  padding:5px 12px;border-radius:20px;
}

/* ── 16. Diferencias ──────────────────────────────────── */
.s-diferencias{background:var(--ink-soft);padding:120px 0}
.dif-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.dif-item{
  padding:36px 24px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r);
  transition:background .3s,border-color .3s;
}
.dif-item:hover{
  background:rgba(255,255,255,.03);
  border-color:rgba(242,101,34,.2);
}
.dif-icon{font-size:30px;display:block;margin-bottom:18px}
.dif-item h3{
  font-family:var(--disp);font-size:20px;letter-spacing:.5px;
  color:#fff;margin-bottom:10px;
}
.dif-item p{font-size:14px;color:rgba(255,255,255,.48);line-height:1.75}

/* ── 17. Recruit Pro ──────────────────────────────────── */
.s-recruit{
  position:relative;background:var(--blue-3);padding:120px 0;overflow:hidden;
}
.recruit-bg{position:absolute;inset:0;z-index:0}
.recruit-glow-l,.recruit-glow-r{
  position:absolute;width:500px;height:500px;
  border-radius:50%;filter:blur(80px);pointer-events:none;
}
.recruit-glow-l{
  left:-10%;top:20%;
  background:radial-gradient(circle,rgba(0,61,165,.5),transparent 65%);
}
.recruit-glow-r{
  right:-10%;bottom:10%;
  background:radial-gradient(circle,rgba(242,101,34,.25),transparent 65%);
}
.s-recruit .wrap{position:relative;z-index:1}

.recruit-head{text-align:center;margin-bottom:80px}
.recruit-h2{
  font-family:var(--disp);
  font-size:clamp(72px,12vw,148px);
  line-height:.9;letter-spacing:2px;color:#fff;
  margin-bottom:10px;
}
.recruit-h2 span{color:var(--orange)}
.recruit-sub{
  font-family:var(--disp);
  font-size:clamp(16px,2.5vw,26px);
  letter-spacing:4px;color:rgba(255,255,255,.35);
  margin-bottom:24px;
}
.recruit-desc{
  font-size:16px;font-weight:300;color:rgba(255,255,255,.65);
  max-width:560px;margin-inline:auto;line-height:1.8;
}

/* Fases */
.fases{
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r);overflow:hidden;margin-bottom:56px;
}
.fase{
  display:grid;grid-template-columns:160px 1fr;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .3s;
}
.fase:last-child{border-bottom:none}
.fase:hover{background:rgba(255,255,255,.025)}
.fase-left{
  padding:36px 32px;
  border-right:1px solid rgba(255,255,255,.08);
}
.fase-d{font-family:var(--disp);font-size:40px;color:var(--orange);line-height:1}
.fase-dl{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.25)}
.fase-right{padding:36px 40px}
.fase-right h3{
  font-family:var(--disp);font-size:22px;letter-spacing:.5px;
  color:#fff;margin-bottom:20px;
}
.fase-ul{
  display:grid;grid-template-columns:1fr 1fr;gap:8px 32px;
}
.fase-ul li{
  font-size:14px;color:rgba(255,255,255,.6);
  padding-left:16px;position:relative;line-height:1.5;
}
.fase-ul li::before{
  content:'→';position:absolute;left:0;
  color:var(--orange);font-size:12px;
}

/* Entregables */
.entregables{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r);padding:40px;margin-bottom:56px;
}
.entregables-title{
  font-family:var(--disp);font-size:18px;letter-spacing:.5px;
  color:#fff;margin-bottom:24px;
}
.ent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ent-item{
  font-size:14px;color:rgba(255,255,255,.7);
  display:flex;align-items:baseline;gap:8px;line-height:1.5;
}
.ent-item span{color:var(--orange);font-weight:700;flex-shrink:0}

/* Pricing */
.pricing{
  display:flex;align-items:center;justify-content:center;
  gap:20px;margin-bottom:56px;flex-wrap:wrap;
}
.price-card{
  border-radius:var(--r);padding:36px 40px;
  flex:1;min-width:280px;max-width:400px;
}
.price-card--split{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
}
.price-card--full{
  background:var(--blue);
  border:1px solid rgba(242,101,34,.3);
  position:relative;overflow:hidden;
}
.price-card--full::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--orange),var(--orange-2));
}
.price-badge{
  display:inline-block;font-size:10px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;
  background:var(--orange);color:#fff;
  padding:4px 12px;border-radius:20px;margin-bottom:14px;
}
.price-lbl{
  font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:18px;
}
.price-row{display:flex;align-items:baseline;gap:16px;margin-bottom:12px}
.price-row--center{justify-content:center}
.price-chunk{display:flex;flex-direction:column;gap:4px}
.price-n{font-family:var(--disp);font-size:44px;color:var(--orange);line-height:1}
.price-n--xl{font-size:64px}
.price-plus{font-family:var(--disp);font-size:28px;color:rgba(255,255,255,.2)}
.price-note{font-size:12px;color:rgba(255,255,255,.4);margin-bottom:10px}
.price-note--c{text-align:center}
.price-total{font-size:13px;color:rgba(255,255,255,.5)}
.price-or{
  font-family:var(--disp);font-size:18px;letter-spacing:2px;
  color:rgba(255,255,255,.2);flex-shrink:0;
}
.recruit-foot{text-align:center}

/* ── 18. Contacto ─────────────────────────────────────── */
.s-contacto{position:relative;background:var(--blue-3);padding:120px 0;overflow:hidden}
.contacto-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 60% at 0% 50%,rgba(242,101,34,.15),transparent 60%),
    radial-gradient(ellipse 50% 50% at 100% 50%,rgba(0,61,165,.4),transparent 60%);
}
.s-contacto .wrap{position:relative;z-index:1}
.contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.contacto-text h2{
  font-family:var(--disp);
  font-size:clamp(48px,7vw,84px);
  color:#fff;line-height:1;margin-bottom:24px;
}
.contacto-text p{
  font-size:15px;color:rgba(255,255,255,.58);
  line-height:1.8;max-width:380px;margin-bottom:40px;
}
.contacto-links{display:flex;flex-direction:column;gap:12px}
.contact-link{
  display:flex;align-items:center;gap:10px;
  font-size:14px;font-weight:500;color:rgba(255,255,255,.65);
  transition:color .2s;
}
.contact-link:hover{color:var(--orange)}
.contact-link svg{flex-shrink:0;opacity:.6}

/* Form */
.form-wrap{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r);padding:40px;
  position:relative;
}
.cform{display:flex;flex-direction:column;gap:20px}
.cform.is-sent{opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .5s,transform .5s}

/* Floating label fields */
.field{position:relative}
.field input,.field textarea{
  width:100%;padding:20px 16px 8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  font-family:var(--sans);font-size:15px;color:#fff;
  outline:none;resize:none;
  transition:border-color .2s,background .2s;
}
.field input:focus,.field textarea:focus{
  border-color:var(--orange);background:rgba(255,255,255,.09);
}
.field label{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  font-size:14px;color:rgba(255,255,255,.35);
  pointer-events:none;
  transition:top .22s var(--ease-out),transform .22s,font-size .22s,color .22s;
}
.field textarea~label{top:22px;transform:none}
.field input:focus~label,
.field input:not(:placeholder-shown)~label{
  top:8px;transform:none;font-size:10px;letter-spacing:1px;
  text-transform:uppercase;color:var(--orange);
}
.field textarea:focus~label,
.field textarea:not(:placeholder-shown)~label{
  top:4px;font-size:10px;letter-spacing:1px;
  text-transform:uppercase;color:var(--orange);
}

/* Submit button states */
.cform-btn{position:relative;overflow:hidden}
.btn-spin,.btn-check{
  position:absolute;inset:0;display:grid;place-items:center;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.cform.is-sending .btn-lbl{opacity:0}
.cform.is-sending .btn-spin{opacity:1}
.btn-spin::after{
  content:'';width:18px;height:18px;
  border:1.5px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-check{
  width:100%;height:100%;
}
.btn-check path{
  stroke:#fff;stroke-width:2;fill:none;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .6s var(--ease-out) .1s;
}
.cform.is-success .btn-lbl{opacity:0}
.cform.is-success .btn-check{opacity:1}
.cform.is-success .btn-check path{stroke-dashoffset:0}
.cform.is-success{background:#1a9e55}

.form-note{font-size:12px;color:rgba(255,255,255,.28);text-align:center}

.cform-success{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;border-radius:var(--r);
  opacity:0;pointer-events:none;
  transition:opacity .7s var(--ease-out) .3s;
}
.cform-success[aria-hidden="false"]{opacity:1;pointer-events:auto}
.success-icon{
  font-size:40px;color:var(--orange);
  background:rgba(242,101,34,.12);
  width:72px;height:72px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.cform-success h3{
  font-family:var(--disp);font-size:28px;color:#fff;letter-spacing:.5px;
}
.cform-success p{font-size:14px;color:rgba(255,255,255,.55)}

/* ── 19. Footer ───────────────────────────────────────── */
.footer{
  background:var(--ink);
  border-top:1px solid rgba(255,255,255,.06);
  padding:64px 0 32px;
}
.footer-grid{
  display:grid;grid-template-columns:1fr auto auto;
  gap:48px;align-items:start;margin-bottom:48px;
}
.footer-logo{
  font-family:var(--disp);font-size:22px;letter-spacing:2.5px;
  color:#fff;display:block;margin-bottom:12px;
}
.footer-logo span{color:var(--orange)}
.footer-brand p{font-size:13px;color:rgba(255,255,255,.32);line-height:1.6}
.footer-nav{display:flex;flex-direction:column;gap:10px}
.footer-nav a{font-size:13px;color:rgba(255,255,255,.45);transition:color .2s}
.footer-nav a:hover{color:var(--orange)}
.footer-contact{display:flex;flex-direction:column;gap:10px}
.footer-contact a{font-size:13px;color:rgba(255,255,255,.45);transition:color .2s}
.footer-contact a:hover{color:var(--orange)}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.06);flex-wrap:wrap;gap:8px;
}
.footer-bottom p{font-size:12px;color:rgba(255,255,255,.2)}
.footer-tagline{font-style:italic}

/* ── 20. Responsive ───────────────────────────────────── */
@media(max-width:960px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav-drawer{display:flex}

  .problema-grid{grid-template-columns:1fr}
  .sistema-grid{grid-template-columns:1fr;gap:48px}
  .sistema-orb-wrap{height:300px}
  .orb-scene{width:280px;height:280px}
  .srv-grid{grid-template-columns:1fr 1fr}
  .dif-grid{grid-template-columns:1fr 1fr}
  .ent-grid{grid-template-columns:repeat(2,1fr)}
  .fase{grid-template-columns:100px 1fr}
  .fase-ul{grid-template-columns:1fr}
  .contacto-grid{grid-template-columns:1fr;gap:48px}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .footer-bottom{flex-direction:column;text-align:center}

  body{cursor:auto}
  .cursor{display:none}
  a,button{cursor:pointer}
}

@media(max-width:540px){
  :root{--wrap:min(100%,100% - 32px)}
  .hero-h1{font-size:clamp(54px,15vw,84px)}
  .srv-grid{grid-template-columns:1fr}
  .dif-grid{grid-template-columns:1fr}
  .ent-grid{grid-template-columns:1fr}
  .pricing{flex-direction:column;align-items:stretch}
  .price-card{max-width:100%}
  .price-or{text-align:center}
  .fase{grid-template-columns:1fr}
  .fase-left{border-right:none;border-bottom:1px solid rgba(255,255,255,.08);padding:20px 28px;display:flex;align-items:baseline;gap:8px}
  .fase-right{padding:24px 28px}
  .form-wrap{padding:24px 20px}
  .entregables{padding:28px 20px}
}

/* ── 21. Reduced motion (intrusive only) ──────────────── */
@media(prefers-reduced-motion:reduce){
  .hero-glow--blue,.hero-glow--orange{animation:none}
  .orb{animation:none}
  .orb-ring{animation:none}
  .orb-tag{animation:none}
  .scroll-cue-line{animation:none}
  .pt{animation:none;display:none}
  .splash-line{animation:none;width:120px}
}

/* ── 22. WhatsApp block ───────────────────────────────── */
.form-wrap--wa{
  display:flex;align-items:center;justify-content:center;
}
.wa-block{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r);padding:48px 40px;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:16px;width:100%;
}
.wa-icon{
  width:80px;height:80px;
  background:rgba(37,211,102,.12);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:8px;
}
.wa-title{
  font-family:var(--disp);font-size:28px;letter-spacing:.5px;color:#fff;
}
.wa-desc{
  font-size:15px;color:rgba(255,255,255,.55);
  line-height:1.75;max-width:340px;
}
.btn--wa{
  background:#25D366;color:#fff;
  box-shadow:0 4px 24px rgba(37,211,102,.3);
  font-size:16px;padding:16px 32px;
  display:inline-flex;align-items:center;gap:10px;
  margin-top:8px;border-radius:10px;width:100%;justify-content:center;
}
.btn--wa:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(37,211,102,.45);
}
.wa-note{font-size:12px;color:rgba(255,255,255,.28);margin-top:4px}