/* ASTRAX Digital — estilos compartidos del sitio */
:root{
  --ink:#000000; --fg:#f4f6ff; --muted:#8990a8;
  --blue:#0052FF; --navy:#001A66; --cyan:#00C2FF; --red:#FF3B00; --orange:#FF9A26;
  --spectral:linear-gradient(100deg,#FF3B00,#FF9A26 24%,#ffffff 50%,#00C2FF 74%,#0052FF);
  --line:rgba(255,255,255,.1); --line-strong:rgba(255,255,255,.2);
  --gutter:max(22px,env(safe-area-inset-left,0px));
  --gutter-r:max(22px,env(safe-area-inset-right,0px));
  /* acento de página (lo pisa cada página de servicio) */
  --accent:#0052FF; --accent-2:#00C2FF;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--fg);font-family:"Quicksand",system-ui,sans-serif;overflow-x:hidden;line-height:1.6;margin:0}
::selection{background:var(--blue);color:#fff}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:1240px;margin-inline:auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.font-display{font-family:"Cormorant Garamond",Georgia,serif}
.eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase}
.huge{font-weight:400;letter-spacing:-.01em;line-height:1.05;text-transform:none}
.spectral-text{background:var(--spectral);-webkit-background-clip:text;background-clip:text;color:transparent}
.accent-text{color:var(--accent)}

/* aurora */
@keyframes aur1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-40px) scale(1.15)}}
@keyframes aur2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,40px) scale(1.1)}}
@keyframes aur3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,50px) scale(1.2)}}
.aurora{position:absolute;inset:-10% -5%;z-index:0;pointer-events:none;filter:blur(70px);opacity:.75}
.aurora span{position:absolute;border-radius:50%}
.a1{width:46vw;height:46vw;max-width:560px;max-height:560px;top:-8%;left:-4%;background:radial-gradient(circle,#0052FF,transparent 66%);animation:aur1 18s ease-in-out infinite}
.a2{width:40vw;height:40vw;max-width:480px;max-height:480px;top:-6%;right:-4%;background:radial-gradient(circle,#00C2FF,transparent 64%);animation:aur2 22s ease-in-out infinite}
.a3{width:38vw;height:38vw;max-width:460px;max-height:460px;bottom:-16%;left:24%;background:radial-gradient(circle,#FF3B00,transparent 62%);animation:aur3 20s ease-in-out infinite}
.a4{width:30vw;height:30vw;max-width:360px;max-height:360px;bottom:-10%;right:10%;background:radial-gradient(circle,#FF9A26,transparent 64%);animation:aur1 24s ease-in-out infinite reverse}
/* aurora teñida al acento (páginas de servicio) */
.aurora.tint .a1{background:radial-gradient(circle,var(--accent),transparent 66%)}
.aurora.tint .a2{background:radial-gradient(circle,var(--accent-2),transparent 64%)}
.cursor-glow{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.6;background:radial-gradient(240px 240px at var(--mx,70%) var(--my,30%),rgba(0,194,255,.28),transparent 70%);transition:background .12s}

.glass{position:relative;border-radius:30%;background:radial-gradient(130% 120% at 28% 18%,rgba(255,255,255,.95),rgba(255,255,255,0) 34%),conic-gradient(from 200deg,#0052FF,#00C2FF,#fff,#FF9A26,#FF3B00,#6a2bff,#0052FF);filter:saturate(1.2);box-shadow:inset 0 -24px 46px rgba(0,0,30,.5),inset 14px 14px 32px rgba(255,255,255,.35),0 40px 80px -24px rgba(0,82,255,.6)}
@keyframes fsp{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-24px) rotate(8deg)}}
.fs{animation:fsp 15s ease-in-out infinite}

/* X iridiscente del hero (forma de la X rellena con el degradado espectral) */
@keyframes heroxf{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-18px) rotate(3deg)}}
@keyframes heroxpulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.hero-x-wrap{position:relative;display:grid;place-items:center;width:clamp(220px,46vw,380px);margin-inline:auto}
.hero-x-glow{position:absolute;width:82%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(0,194,255,.5),rgba(0,82,255,.24) 46%,transparent 72%);filter:blur(34px);animation:heroxpulse 6s ease-in-out infinite}
.hero-x{position:relative;width:100%;aspect-ratio:992/650;background:conic-gradient(from 210deg,#0052FF,#00C2FF,#ffffff,#FF9A26,#FF3B00,#6a2bff,#0052FF);-webkit-mask:url(x-white.png) center/contain no-repeat;mask:url(x-white.png) center/contain no-repeat;filter:saturate(1.25) drop-shadow(0 24px 50px rgba(0,82,255,.55));animation:heroxf 9s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.hero-x,.hero-x-glow{animation:none}}

/* ---- hero tipo propuesta: tarjeta-imagen + aura espectral ---- */
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(24px,-20px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,18px)}}
.media-card{position:relative;overflow:hidden;border-radius:24px;border:1px solid var(--line-strong);min-height:clamp(210px,33vw,360px);background:#04060f url("hero.png") center right/cover no-repeat;isolation:isolate;display:flex}
.mc-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,2,12,.82),rgba(0,2,12,.4) 40%,transparent 66%),linear-gradient(0deg,rgba(0,2,12,.65),transparent 46%)}
.media-card .mc-blobs{position:absolute;inset:0;z-index:0}
.media-card .b{position:absolute;border-radius:50%;filter:blur(42px);mix-blend-mode:screen}
.media-card .b1{width:70%;height:95%;top:-12%;left:-8%;background:radial-gradient(circle,#0052FF,transparent 65%);animation:drift1 13s ease-in-out infinite}
.media-card .b2{width:55%;height:85%;bottom:-18%;right:4%;background:radial-gradient(circle,#00C2FF,transparent 62%);animation:drift2 16s ease-in-out infinite}
.media-card .b3{width:46%;height:62%;bottom:-12%;right:-8%;background:radial-gradient(circle,#FF9A26,transparent 62%);animation:drift1 18s ease-in-out infinite reverse}
.mc-x{position:absolute;z-index:2;right:7%;top:50%;transform:translateY(-58%);width:clamp(78px,15vw,168px);filter:drop-shadow(0 14px 34px rgba(0,0,0,.5))}
.mc-head{position:relative;z-index:3;align-self:flex-end;padding:clamp(1.3rem,3.2vw,2.5rem)}
.ph-tag{position:absolute;z-index:4;top:14px;left:14px;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72);background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:100px;padding:.3rem .65rem;backdrop-filter:blur(6px)}
.punto{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#2e6bff,#0052FF);display:grid;place-items:center;box-shadow:0 0 26px rgba(0,82,255,.8);flex-shrink:0}
.punto::after{content:"";width:12px;height:12px;border-radius:50%;background:#fff}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}}
.chev{animation:bob 1.8s ease-in-out infinite;display:inline-block}
@keyframes auraPulse{0%,100%{opacity:.82;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.05)}}
.hero-aura{position:absolute;left:50%;bottom:-150px;transform:translateX(-50%);width:150%;max-width:1600px;height:560px;z-index:0;pointer-events:none;filter:blur(46px);opacity:.5;
  background:
    radial-gradient(42% 70% at 26% 100%, rgba(0,82,255,.6), transparent 60%),
    radial-gradient(40% 68% at 46% 100%, rgba(0,194,255,.55), transparent 58%),
    radial-gradient(30% 55% at 56% 100%, rgba(255,255,255,.72), transparent 55%),
    radial-gradient(40% 66% at 70% 100%, rgba(255,154,38,.55), transparent 58%),
    radial-gradient(36% 60% at 84% 100%, rgba(255,59,0,.5), transparent 60%);
  animation:auraPulse 9s ease-in-out infinite}
/* horizonte de planeta: borde curvo oscuro con atmósfera brillando encima */
.hero-planet-glow{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);width:170%;height:188px;z-index:1;pointer-events:none;filter:blur(30px);border-radius:50% 50% 0 0 / 100% 100% 0 0;background:linear-gradient(90deg,#0052FF,#00C2FF 28%,#ffffff 50%,#FF9A26 72%,#FF3B00)}
.hero-planet{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);width:170%;height:158px;z-index:2;pointer-events:none;border-radius:50% 50% 0 0 / 100% 100% 0 0;background:var(--ink)}

/* manifiesto: grilla de puntos + glow espectral (elementos de marca) */
.mani-dots{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background:linear-gradient(90deg,#0052FF,#00C2FF 30%,#ffffff 50%,#FF9A26 72%,#FF3B00);
  -webkit-mask:radial-gradient(circle,#000 1.4px,transparent 1.8px) 0 0/26px 26px, radial-gradient(ellipse 58% 56% at 50% 48%,transparent 28%,#000 72%);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle,#000 1.4px,transparent 1.8px) 0 0/26px 26px, radial-gradient(ellipse 58% 56% at 50% 48%,transparent 28%,#000 72%);
  mask-composite:intersect}
.mani-glow{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:min(900px,96%);height:520px;z-index:0;pointer-events:none;filter:blur(74px);opacity:.62;background:radial-gradient(ellipse at center,rgba(0,82,255,.6),rgba(0,194,255,.3) 40%,rgba(255,154,38,.18) 64%,transparent 80%)}
.mani-deco{position:absolute;z-index:0;pointer-events:none;opacity:.65;filter:drop-shadow(0 0 18px rgba(0,82,255,.45));animation:fsp 16s ease-in-out infinite}
.sec-num{font-weight:500;color:var(--muted);font-size:.95rem;font-variant-numeric:tabular-nums}
.tag-pill{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line-strong);border-radius:100px;padding:.42rem .9rem;font-size:.82rem;color:var(--fg);background:rgba(255,255,255,.03)}
.tag-pill svg{width:15px;height:15px;color:var(--cyan)}
.pill-inline{display:inline-flex;align-items:center;gap:.32em;background:var(--blue);color:#fff;border-radius:100px;padding:.04em .5em .12em;font-weight:600;white-space:nowrap;vertical-align:baseline}
.pill-inline svg{width:.74em;height:.74em}
@media (prefers-reduced-motion:reduce){.hero-aura,.chev,.media-card .b{animation:none}}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:#000}
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:blur(16px);background:rgba(0,0,0,.7)}
.navrow{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding-block:1rem}
.navlinks{display:none;align-items:center;gap:2.1rem;font-size:.9rem;font-weight:500;color:var(--muted)}
.navlinks a:hover{color:#fff}
.navlinks a.active{color:#fff}
@media(min-width:1024px){.navlinks{display:flex}}
.logo{height:28px;width:auto}

/* pills & botones */
.pill{display:inline-flex;align-items:center;gap:1rem;background:#fff;color:#07070e;border-radius:100px;padding:.5rem .5rem .5rem 1.4rem;font-weight:600;font-size:.95rem;transition:transform .25s;text-decoration:none}
.pill:hover{transform:translateY(-2px)}
.pill .knob{width:36px;height:36px;border-radius:50%;background:#07070e;color:#fff;display:grid;place-items:center;transition:background .25s}
.pill:hover .knob{background:var(--accent)}
.pill-ghost{background:transparent;color:var(--fg);border:1px solid var(--line-strong)}
.pill-ghost .knob{background:#fff;color:#07070e}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;border-radius:100px;cursor:pointer;border:1px solid transparent;transition:transform .25s,box-shadow .25s;text-decoration:none;padding:.9rem 1.5rem}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 30px -10px rgba(0,82,255,.9)}
.btn-primary:hover{transform:translateY(-2px)}

/* cápsulas de servicio */
.cap{position:relative;border-radius:40px;min-height:290px;padding:1.7rem 1.5rem;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;transition:transform .35s,box-shadow .35s;text-decoration:none}
@media(min-width:1024px){.cap{min-height:340px;border-radius:46px;padding:1.9rem 1.7rem}}
.cap:hover{transform:translateY(-10px)}
.cap .num{width:36px;height:36px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-size:.82rem;font-weight:700}
.cap h3{font-weight:600;font-size:1.5rem;letter-spacing:-.01em;line-height:1.05}
.cap p{font-size:.9rem;opacity:.9;margin-top:.5rem}
.cap .sheen{position:absolute;inset:0;background:radial-gradient(120% 80% at 20% 0,rgba(255,255,255,.28),transparent 55%);pointer-events:none}

/* metric / feature / step */
.metric{position:relative;border:1px solid var(--line);border-radius:22px;padding:1.7rem;overflow:hidden;transition:transform .3s,border-color .3s}
.metric:hover{transform:translateY(-5px)}
.metric::before{content:"";position:absolute;width:120px;height:120px;top:-50px;right:-40px;border-radius:50%;filter:blur(36px);background:var(--c,var(--accent));opacity:.4}
.feat{border:1px solid var(--line);border-radius:20px;padding:1.6rem;transition:transform .3s,border-color .3s}
.feat:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.feat .dot{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px var(--accent);margin-bottom:1rem}
.feat h3{font-weight:700;font-size:1.12rem;margin-bottom:.45rem}
.feat p{color:var(--muted);font-size:.92rem}
.step{position:relative;border:1px solid var(--line);border-radius:18px;padding:1.6rem}
.step .n{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;font-size:2.5rem;line-height:1;margin-bottom:.7rem;background:var(--spectral);-webkit-background-clip:text;background-clip:text;color:transparent}
.step h3{font-weight:600;font-size:1.05rem;margin-bottom:.4rem}
.step p{color:var(--muted);font-size:.88rem}

/* campos */
.fld{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:.95rem 1.1rem;color:var(--fg);font-size:.98rem;font-family:inherit;transition:border-color .25s,background .25s}
.fld::placeholder{color:#636a86}
.fld:focus{outline:none;border-color:var(--accent-2);background:rgba(0,194,255,.05)}
.fld-light{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25);color:#fff}
.fld-light::placeholder{color:rgba(255,255,255,.6)}
.fld-light:focus{border-color:#fff;background:rgba(255,255,255,.2)}
select.fld{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1.1rem center;padding-right:2.6rem;cursor:pointer}
select.fld option{color:#111}

/* footer */
footer.site{border-top:1px solid rgba(255,255,255,.06)}
footer.site .frow{padding-block:2.5rem;display:flex;flex-direction:column;gap:1.5rem}
footer.site nav{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.85rem;color:var(--muted)}
footer.site nav a:hover{color:#fff}
footer.site .copy{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;border-top:1px solid var(--line);padding-top:1.4rem;font-size:.75rem;color:var(--muted)}

/* page hero (servicios) */
.page-hero{position:relative;overflow:hidden}
.page-hero .inner{position:relative;z-index:10;padding-block:clamp(3rem,8vw,6rem)}
.cta-accent{position:relative;overflow:hidden}
.cta-accent .blob{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}

/* rediseño editorial páginas de servicio */
.svc-bignum{position:absolute;right:-1%;top:-9%;font-family:"Quicksand",sans-serif;font-weight:700;font-size:clamp(13rem,32vw,28rem);line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.07);pointer-events:none;z-index:0;user-select:none}
.svc-glow{position:absolute;right:-12%;bottom:-34%;width:72%;max-width:760px;aspect-ratio:1;border-radius:50%;z-index:1;pointer-events:none;filter:blur(95px);opacity:.5;background:radial-gradient(circle,var(--accent),var(--accent-2) 46%,transparent 72%)}
.svc-list{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:768px){.svc-list{grid-template-columns:1fr 1fr;column-gap:3.5rem}}
.svc-row{display:flex;gap:1.3rem;align-items:flex-start;padding:1.5rem 0;border-top:1px solid var(--line)}
.svc-row .rn{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;font-size:2.1rem;line-height:1;min-width:2.5rem;background:var(--spectral);-webkit-background-clip:text;background-clip:text;color:transparent}
.svc-row h3{font-weight:600;font-size:1.15rem;margin-bottom:.3rem}
.svc-row p{color:var(--muted);font-size:.95rem}
.spec-div{height:3px;border-radius:2px;background:var(--spectral)}

@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin 24s linear infinite}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto}}