/* ==========================================================================
   ELANUBE · styles.css
   Paleta oficial: #071B49 · #1265E8 · #169BFA · #38DDF2 · #FFFFFF
   ========================================================================== */

@font-face{font-family:"Poppins";font-weight:400;font-style:normal;font-display:swap;src:url("assets/fonts/poppins-400.woff") format("woff")}
@font-face{font-family:"Poppins";font-weight:500;font-style:normal;font-display:swap;src:url("assets/fonts/poppins-500.woff") format("woff")}
@font-face{font-family:"Poppins";font-weight:700;font-style:normal;font-display:swap;src:url("assets/fonts/poppins-700.woff") format("woff")}
@font-face{font-family:"Lora";font-weight:500;font-style:italic;font-display:swap;src:url("assets/fonts/lora-italic-500.woff") format("woff")}

:root{
  --navy:#071B49;
  --navy-900:#040F2E;
  --deep:#030B22;
  --blue:#1265E8;
  --sky:#169BFA;
  --cyan:#38DDF2;
  --white:#fff;
  --mist:#EEF4FD;
  --line:#D5E0F4;
  --ink:#0A1E4E;
  --muted:#4F628C;          /* texto secundario sobre claro */
  --muted-d:#A9BCDD;        /* texto secundario sobre oscuro */
  --grad:linear-gradient(120deg,#1265E8 0%,#169BFA 55%,#38DDF2 100%);

  --font:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Lora",Georgia,"Times New Roman",serif;

  --hh:4.5rem;
  --sheet:clamp(1.75rem,5vw,4rem);
  --gut:clamp(1.25rem,4vw,2.5rem);
  --ease:cubic-bezier(.2,.75,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + .75rem)}
html.menu-open{overflow:hidden}
body{margin:0;font-family:var(--font);font-size:1.0625rem;line-height:1.65;color:var(--ink);background:var(--navy);overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}

:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:.4rem}
.sec--white :focus-visible,.sec--mist :focus-visible,.form-card :focus-visible{outline-color:var(--blue)}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:1rem;top:-5rem;z-index:300;background:var(--cyan);color:var(--navy);padding:.7rem 1.1rem;border-radius:.6rem;font-weight:700;text-decoration:none;transition:top .2s}
.skip:focus{top:1rem}

.wrap{width:100%;max-width:75rem;margin-inline:auto;padding-inline:var(--gut)}

/* ---------- Tipografía ---------- */
.h2{font-size:clamp(1.85rem,1.2rem + 2.9vw,3.2rem);line-height:1.08;letter-spacing:-.025em;font-weight:700;text-wrap:balance}
.lead{font-size:clamp(1.05rem,1rem + .35vw,1.2rem);line-height:1.6;color:var(--muted);max-width:38rem;text-wrap:pretty}
.sec--navy .lead,.sec--deep .lead{color:var(--muted-d)}
.sec--navy,.sec--deep{color:#fff}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3rem;padding:.8rem 1.55rem;border-radius:99px;font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;border:1.5px solid transparent;transition:transform .25s var(--ease),box-shadow .25s,background-color .25s,border-color .25s,color .25s;position:relative;text-align:center}
.btn--lg{min-height:3.4rem;padding:.9rem 1.9rem;font-size:1.05rem}
.btn--block{width:100%}
.btn--cyan{background:var(--cyan);color:var(--navy);box-shadow:0 8px 28px -8px rgba(56,221,242,.65)}
.btn--cyan:hover{transform:translateY(-2px);box-shadow:0 14px 34px -8px rgba(56,221,242,.8);background:#6AE8F7}
.btn--blue{background:var(--blue);color:#fff;box-shadow:0 8px 26px -10px rgba(18,101,232,.8)}
.btn--blue:hover{transform:translateY(-2px);background:#0D57D0;box-shadow:0 14px 32px -10px rgba(18,101,232,.9)}
.btn--ghost{border-color:rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.04)}
.btn--ghost:hover{border-color:var(--cyan);background:rgba(56,221,242,.1);transform:translateY(-2px)}
.btn--line{border-color:var(--blue);color:var(--blue);background:transparent}
.btn--line:hover{background:var(--blue);color:#fff}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.7;cursor:progress;transform:none}

/* ---------- Header / navegación ---------- */
.header{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--hh)}
.header::before{content:"";position:absolute;inset:0;background:rgba(4,15,46,0);border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}
.header.is-scrolled::before{background:rgba(4,15,46,.93);border-bottom-color:rgba(255,255,255,.09);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.menu-open .header::before{background:var(--navy-900);border-bottom-color:rgba(255,255,255,.09)}
.header__bar{position:relative;z-index:2;height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}

.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;color:#fff;position:relative;z-index:3;min-height:2.75rem}
.brand__mark{width:2.55rem;height:auto;filter:drop-shadow(0 0 14px rgba(22,155,250,.55))}
.brand__word{font-weight:700;font-size:1.3rem;letter-spacing:.06em}

.burger{position:relative;z-index:3;width:2.9rem;height:2.9rem;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.05);display:grid;place-items:center;padding:0;transition:background-color .25s,border-color .25s}
.burger:hover{border-color:var(--cyan)}
.burger__box{position:relative;width:1.2rem;height:.9rem;display:block}
.burger__box i{position:absolute;left:0;width:100%;height:2px;background:#fff;border-radius:2px;transition:transform .35s var(--ease),opacity .2s,top .35s var(--ease)}
.burger__box i:nth-child(1){top:0}
.burger__box i:nth-child(2){top:calc(50% - 1px)}
.burger__box i:nth-child(3){top:calc(100% - 2px)}
.menu-open .burger__box i:nth-child(1){top:calc(50% - 1px);transform:rotate(45deg)}
.menu-open .burger__box i:nth-child(2){opacity:0}
.menu-open .burger__box i:nth-child(3){top:calc(50% - 1px);transform:rotate(-45deg)}

/* Móvil: panel a pantalla completa (no depende de bloquear el body) */
.nav{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:2rem;padding:calc(var(--hh) + 1.5rem) var(--gut) max(2rem,env(safe-area-inset-bottom));background:var(--navy-900);background-image:radial-gradient(40rem 26rem at 90% 0%,rgba(18,101,232,.45),transparent 65%);overflow-y:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;transform:translateY(-.75rem);transition:opacity .3s,transform .4s var(--ease),visibility 0s linear .4s}
.menu-open .nav{visibility:visible;opacity:1;transform:none;transition:opacity .3s,transform .4s var(--ease),visibility 0s}
.nav__list{display:grid;gap:.25rem}
.nav__list a{display:block;padding:.55rem 0;font-size:clamp(1.8rem,8vw,2.4rem);font-weight:700;letter-spacing:-.02em;text-decoration:none;color:#fff;transition:color .2s,transform .3s var(--ease)}
.nav__list a:hover,.nav__list a[aria-current="true"]{color:var(--cyan)}
.nav__cta{align-self:flex-start}
.nav__foot{color:var(--muted-d);font-size:.95rem}
.nav__foot a{color:#fff}

@media (min-width:62rem){
  :root{--hh:5rem}
  .burger{display:none}
  .nav{position:static;inset:auto;z-index:auto;flex-direction:row;align-items:center;justify-content:flex-end;gap:2rem;padding:0;background:none;overflow:visible;visibility:visible;opacity:1;transform:none;transition:none}
  .menu-open .nav{transition:none}
  .nav__list{display:flex;gap:.2rem}
  .nav__list a{font-size:.95rem;font-weight:500;letter-spacing:0;padding:.55rem .85rem;border-radius:99px;color:rgba(255,255,255,.88);position:relative}
  .nav__list a::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.2rem;height:2px;border-radius:2px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
  .nav__list a:hover{color:#fff}
  .nav__list a:hover::after,.nav__list a[aria-current="true"]::after{transform:scaleX(1)}
  .nav__list a[aria-current="true"]{color:#fff}
  .nav__cta{align-self:auto;min-height:2.75rem;padding:.6rem 1.3rem;font-size:.95rem}
  .nav__foot{display:none}
}

/* ---------- Secciones (hojas superpuestas) ---------- */
.sec{position:relative;padding-block:clamp(4.5rem,9vw,8rem)}
.sheet{border-radius:var(--sheet) var(--sheet) 0 0;margin-top:calc(var(--sheet) * -1);padding-top:calc(clamp(4.5rem,9vw,8rem) + var(--sheet) * .4)}
.sec--white{background:#fff}
.sec--mist{background:var(--mist)}
.sec--navy{background:var(--navy)}
.sec--deep{background:var(--deep)}
.sec__head{display:grid;gap:1.1rem;margin-bottom:clamp(2.2rem,5vw,3.8rem);max-width:44rem}
.sec__head--center{margin-inline:auto;text-align:center;justify-items:center}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;color:#fff;padding:calc(var(--hh) + clamp(2rem,6vw,4rem)) 0 calc(var(--sheet) + clamp(3rem,7vw,5rem));background:radial-gradient(60rem 40rem at 80% 6%,rgba(18,101,232,.6),transparent 62%),radial-gradient(40rem 28rem at 0% 100%,rgba(56,221,242,.16),transparent 62%),linear-gradient(180deg,#071B49 0%,#061641 100%)}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.2) 1px,transparent 1.3px);background-size:30px 30px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);mask-image:linear-gradient(180deg,#000,transparent 75%);opacity:.5;pointer-events:none}
.hero__orbit{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.orbit__line{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.6s .35s cubic-bezier(.5,0,.2,1) forwards}
.orbit__line--2{animation-duration:3.2s;animation-delay:.6s;opacity:.55}
@keyframes draw{to{stroke-dashoffset:0}}


.hero__grid{position:relative;display:grid;gap:clamp(2.5rem,6vw,3.5rem);align-items:center}
.hero__title{font-size:clamp(2.1rem,1.1rem + 4.1vw,3.9rem);line-height:1.05;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
.line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.line>span{display:block;animation:lineUp 1s var(--ease) .15s both}
.line:nth-child(2)>span{animation-delay:.38s}
.line--tint{color:#8FD3FF}
@keyframes lineUp{from{transform:translateY(105%)}to{transform:none}}
.hero__sub{margin-top:1.5rem;max-width:34rem;font-size:clamp(1.05rem,1rem + .4vw,1.25rem);line-height:1.6;color:var(--muted-d);animation:rise .9s var(--ease) .75s both}
.hero__actions{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.85rem;animation:rise .9s var(--ease) .9s both}
.hero__points{margin-top:2.2rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem 1.25rem;max-width:30rem;font-size:.95rem;color:#DCE8FF;animation:rise .9s var(--ease) 1.05s both}
.hero__points li{display:flex;align-items:center;gap:.55rem}
.hero__points svg{flex:none;width:1.25rem;height:1.25rem;padding:.2rem;border-radius:50%;background:rgba(56,221,242,.16);fill:none;stroke:var(--cyan);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (min-width:62rem){
  .hero__grid{grid-template-columns:1.02fr .98fr}
  .hero{padding-top:calc(var(--hh) + 3.5rem)}
}
@media (min-width:36rem){.hero__points{grid-template-columns:repeat(4,max-content);max-width:none;gap:.7rem 1.4rem}}
@media (min-width:62rem){.hero__points{grid-template-columns:repeat(2,max-content)}}

/* ---------- Dispositivos ---------- */
.stage{position:relative;width:100%;max-width:40rem;justify-self:center;padding-bottom:3.2rem}
.stage--hero{animation:stageIn 1.2s var(--ease) .55s both}
@keyframes stageIn{from{opacity:0;transform:translateY(34px) scale(.97)}to{opacity:1;transform:none}}
.stage__glow{position:absolute;inset:10% 0 10%;background:radial-gradient(closest-side,rgba(22,155,250,.45),transparent);filter:blur(30px);z-index:0}
.laptop{position:relative;z-index:1;width:88%}
.stage--hero .laptop{animation:floatA 9s ease-in-out 2s infinite}
.laptop__screen{position:relative;aspect-ratio:16/10;border-radius:.85rem .85rem .3rem .3rem;border:.5rem solid #0B1431;background:#000;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 36px 70px -18px rgba(0,0,0,.65)}
.laptop__base{position:relative;width:112%;margin-left:-6%;height:.7rem;border-radius:0 0 1rem 1rem;background:linear-gradient(#D4DFF2,#8FA5CC);box-shadow:0 18px 30px -10px rgba(0,0,0,.55)}
.laptop__base::after{content:"";position:absolute;left:50%;top:0;width:18%;height:.28rem;transform:translateX(-50%);background:#7189B5;border-radius:0 0 .4rem .4rem}
.phone{position:absolute;z-index:2;right:0;bottom:1.1rem;width:27%}
.stage--hero .phone{animation:floatB 7s ease-in-out 2.2s infinite}
.phone__screen{position:relative;aspect-ratio:9/19;border-radius:1.25rem;border:.35rem solid #0B1431;background:#000;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 28px 50px -12px rgba(0,0,0,.7)}
.phone__screen::after{content:"";position:absolute;z-index:3;left:50%;top:.3rem;width:30%;height:.3rem;transform:translateX(-50%);background:#0B1431;border-radius:1rem}
@keyframes floatA{50%{transform:translateY(-8px)}}
@keyframes floatB{50%{transform:translateY(10px)}}
.stage__cap{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:.6rem;font-size:.82rem;color:var(--muted-d)}
.stage__cap::before{content:"";width:1.8rem;height:1px;background:var(--cyan)}

/* Presentación recreada del proyecto (usa cqw: escala con su contenedor) */
.mock{position:absolute;inset:0;container-type:inline-size;overflow:hidden;background:var(--m-bg);color:var(--m-tx);line-height:1.1;user-select:none;--dark:color-mix(in srgb,var(--m-bg) 70%,#000)}
.mock__page{display:flex;flex-direction:column;width:100%;will-change:transform}
.mock em{font-style:normal;color:var(--m-ac)}
.mock p{margin:0}
.mock--desktop{--shift:-82.9%;--s1:-18.8%;--s2:-38.5%;--s3:-52.7%;--s4:-69.2%}
.mock--desktop .mock__page{height:365cqw}
.mock--phone{--shift:-74.8%;--s1:-18.2%;--s2:-34%;--s3:-48%;--s4:-62.6%}
.mock--phone .mock__page{height:858cqw}
.mock__nav{flex:none;height:6cqw;display:flex;align-items:center;gap:1.2cqw;padding:0 6cqw;background:var(--dark);border-bottom:.12cqw solid color-mix(in srgb,var(--m-ac) 30%,transparent)}
.mock__logo{display:grid;place-items:center;width:3.2cqw;height:3.2cqw;border-radius:50%;border:.2cqw solid var(--m-ac);color:var(--m-ac);font-weight:700;font-size:1.6cqw}
.mock__brand{font-weight:700;font-size:1.5cqw;letter-spacing:.02em;text-transform:uppercase;margin-right:auto;white-space:nowrap}
.mock__links{display:flex;gap:2.4cqw;margin-right:2cqw}
.mock__links i{display:block;width:4cqw;height:.45cqw;border-radius:1cqw;background:color-mix(in srgb,var(--m-tx) 45%,transparent)}
.mock__pill{background:var(--m-ac);color:var(--m-bg);font-weight:700;font-size:1.05cqw;padding:.95cqw 1.8cqw;white-space:nowrap}
.mock__burger{display:none}
.mock__hero{position:relative;flex:none;height:56.5cqw;display:flex;align-items:center;padding:0 6cqw;overflow:hidden;background:var(--m-bg)}
.mock__hero::before{content:"";position:absolute;inset:0;background:var(--photo,none) right center/cover no-repeat;transform-origin:70% 50%;animation:mockZoom 34s ease-in-out infinite alternate}
.mock__hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--m-bg) 0%,color-mix(in srgb,var(--m-bg) 88%,transparent) 30%,color-mix(in srgb,var(--m-bg) 25%,transparent) 75%,color-mix(in srgb,var(--m-bg) 45%,transparent) 100%)}
@keyframes mockZoom{from{transform:scale(1)}to{transform:scale(1.09)}}
.mock__copy{position:relative;z-index:2;max-width:58cqw}
.mock__tag{font-size:1.05cqw;letter-spacing:.24em;text-transform:uppercase;color:var(--m-ac);font-weight:700}
.mock__rule{width:20cqw;height:.18cqw;background:var(--m-ac);margin:1.2cqw 0 2.4cqw}
.mock__title{font-size:8.4cqw;font-weight:700;line-height:.96;letter-spacing:-.025em;text-transform:uppercase}
.mock__title b{display:block}
.mock__title .gold{color:var(--m-ac)}
.mock__sub{margin-top:2.4cqw;font-size:1.6cqw;line-height:1.35;font-weight:500;max-width:36cqw}
.mock__btns{display:flex;gap:1.2cqw;margin-top:3cqw}
.mock__btn{font-weight:700;font-size:1.2cqw;padding:1.4cqw 2.4cqw;background:var(--m-ac);color:var(--m-bg);white-space:nowrap}
.mock__btn--ghost{background:transparent;color:var(--m-tx);border:.12cqw solid color-mix(in srgb,var(--m-tx) 55%,transparent)}
.mock__ticker{position:relative;flex:none;height:6cqw;overflow:hidden;background:var(--dark);border-top:.12cqw solid color-mix(in srgb,var(--m-ac) 35%,transparent)}
.mock__ticker>div{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;width:max-content;animation:mockTick 46s linear infinite}
.mock__ticker span{display:flex;align-items:center;gap:1cqw;padding-right:3cqw;white-space:nowrap;font-weight:700;font-size:1.9cqw;text-transform:uppercase;letter-spacing:-.01em}
.mock__ticker span::after{content:"";margin-left:2cqw;width:.7cqw;height:.7cqw;background:var(--m-ac);transform:rotate(45deg)}
.mock__ticker::after{content:"";position:absolute;left:-6cqw;right:-6cqw;bottom:0;height:.9cqw;background:repeating-linear-gradient(135deg,var(--m-ac) 0 1.1cqw,var(--m-tx) 1.1cqw 2.2cqw,#000 2.2cqw 3.3cqw);animation:mockStripe 2.4s linear infinite}
@keyframes mockTick{to{transform:translateX(-50%)}}
@keyframes mockStripe{to{transform:translateX(4.667cqw)}}
.mock__kicker{font-size:1cqw;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--m-ac);margin-bottom:1.2cqw}
.mock__h{font-size:4cqw;font-weight:700;line-height:1;letter-spacing:-.02em;text-transform:uppercase;max-width:48cqw}
.mock__services{flex:none;height:72cqw;background:var(--m-bg2);padding:6cqw 14cqw 0}
.mock__intro{margin:2cqw 0 3cqw;font-size:1.2cqw;color:color-mix(in srgb,var(--m-tx) 65%,transparent)}
.mock__row{display:grid;grid-template-columns:5cqw 1fr 10cqw;align-items:center;gap:1cqw;height:12.5cqw;border-top:.1cqw solid color-mix(in srgb,var(--m-ac) 40%,transparent)}
.mock__row>small{font-size:1cqw;color:color-mix(in srgb,var(--m-tx) 50%,transparent)}
.mock__row b{display:block;font-size:2.7cqw;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05}
.mock__row p{margin-top:.8cqw;font-size:1.1cqw;line-height:1.35;color:color-mix(in srgb,var(--m-tx) 62%,transparent);max-width:48cqw}
.mock__price{text-align:right}
.mock__price b{font-size:2.7cqw;color:var(--m-ac)}
.mock__price small{display:block;margin-top:.5cqw;font-size:.9cqw;text-transform:uppercase;color:color-mix(in srgb,var(--m-tx) 50%,transparent)}
.mock__history{flex:none;height:52cqw;background:var(--m-bg);padding:6cqw 14cqw 0;display:grid;grid-template-columns:1fr 1fr;gap:6cqw;align-items:start}
.mock__history .mock__h{margin-bottom:2cqw}
.mock__text{font-size:1.15cqw;line-height:1.5;color:color-mix(in srgb,var(--m-tx) 72%,transparent)}
.mock__photo{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;margin-top:2cqw;background:var(--m-bg2)}
.mock__cards{display:grid;gap:1.8cqw}
.mock__cards>div{height:11.5cqw;border:.1cqw solid color-mix(in srgb,var(--m-ac) 40%,transparent);background:var(--m-bg2);padding:1.8cqw 2.2cqw}
.mock__cards small{display:block;font-size:.85cqw;letter-spacing:.2em;text-transform:uppercase;color:var(--m-ac);font-weight:700}
.mock__cards b{display:block;margin:.8cqw 0 1.2cqw;font-size:1.7cqw;text-transform:uppercase}
.mock__cards i{display:block;height:.45cqw;border-radius:1cqw;background:color-mix(in srgb,var(--m-tx) 26%,transparent);width:85%;margin-bottom:.7cqw}
.mock__cards i+i{width:60%}
.mock__gallery{flex:none;height:60cqw;background:var(--m-bg2);padding:5cqw 14cqw 0}
.mock__gh{margin-bottom:3cqw}
.mock__mosaic{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:16cqw;gap:1.4cqw}
.mock__g{display:block;width:100%;height:100%;object-fit:cover;background:color-mix(in srgb,var(--m-ac) 25%,var(--m-bg))}
.mock__g1,.mock__g2{grid-column:span 3}
.mock__g3,.mock__g4,.mock__g5{grid-column:span 2;grid-row:2}
.mock__reviews{flex:none;height:48cqw;background:var(--m-bg);padding:5cqw 14cqw 0}
.mock__rate{display:flex;align-items:flex-end;gap:2cqw;margin:2.4cqw 0 3.4cqw;padding-bottom:2cqw;border-bottom:.1cqw solid color-mix(in srgb,var(--m-tx) 14%,transparent)}
.mock__rate b{font-size:7cqw;line-height:.8;color:var(--m-ac)}
.mock__rate span{font-size:1.6cqw;letter-spacing:.15em;color:var(--m-ac);padding-bottom:.4cqw}
.mock__rate small{font-size:1.1cqw;color:color-mix(in srgb,var(--m-tx) 62%,transparent);padding-bottom:.5cqw}
.mock__revs{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw}
.mock__rev{padding:2.2cqw;min-height:12cqw;background:var(--m-bg2);border-top:.3cqw solid var(--m-ac);box-shadow:0 1.2cqw 2.4cqw -1cqw rgba(0,0,0,.6)}
.mock__rev:nth-child(1){transform:rotate(-1.4deg)}
.mock__rev:nth-child(2){background:var(--m-tx);color:var(--m-bg);transform:translateY(1.4cqw) rotate(.9deg)}
.mock__rev:nth-child(3){background:var(--m-ac);color:var(--m-bg);transform:rotate(1.2deg)}
.mock__rev b{display:block;font-size:1.45cqw;line-height:1.2;text-transform:uppercase}
.mock__rev small{display:block;margin-top:1.6cqw;font-size:.85cqw;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.mock__location{flex:none;height:46cqw;background:var(--m-bg2);padding:5cqw 14cqw 0;display:grid;grid-template-columns:1fr 1fr;gap:4cqw;align-items:start}
.mock__addr{margin:2cqw 0 2.4cqw;font-size:1.3cqw;line-height:1.5}
.mock__hours div{display:flex;justify-content:space-between;gap:2cqw;padding:1.1cqw 0;border-bottom:.1cqw solid color-mix(in srgb,var(--m-tx) 14%,transparent);font-size:1.05cqw}
.mock__hours span:first-child{font-weight:700}
.mock__map{position:relative;height:30cqw;display:grid;place-content:center;justify-items:center;gap:1.4cqw;border:.1cqw solid color-mix(in srgb,var(--m-ac) 35%,transparent);background:linear-gradient(color-mix(in srgb,var(--m-tx) 7%,transparent) .1cqw,transparent .1cqw) 0 0/4cqw 4cqw,linear-gradient(90deg,color-mix(in srgb,var(--m-tx) 7%,transparent) .1cqw,transparent .1cqw) 0 0/4cqw 4cqw,var(--m-bg)}
.mock__map b{font-size:1.3cqw;text-transform:uppercase}
.mock__pin{width:3cqw;height:3cqw;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--m-ac);animation:mockPin 3.2s ease-in-out infinite}
@keyframes mockPin{50%{transform:rotate(-45deg) translate(.5cqw,.5cqw)}}
.mock__foot{flex:1;display:flex;align-items:center;justify-content:center;background:var(--dark);font-size:1.4cqw;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--m-tx) 60%,transparent)}

/* variante móvil */
.mock--phone .mock__nav{height:14cqw;padding:0 6cqw;gap:3cqw}
.mock--phone .mock__logo{width:8cqw;height:8cqw;font-size:4cqw;border-width:.5cqw}
.mock--phone .mock__brand{font-size:3.9cqw}
.mock--phone .mock__links,.mock--phone .mock__pill{display:none}
.mock--phone .mock__burger{display:block;width:6cqw;height:3.6cqw;border-top:.7cqw solid var(--m-tx);border-bottom:.7cqw solid var(--m-tx);position:relative}
.mock--phone .mock__burger::after{content:"";position:absolute;left:0;right:0;top:50%;height:.7cqw;margin-top:-.35cqw;background:var(--m-tx)}
.mock--phone .mock__hero{height:130cqw;padding:0 7cqw 12cqw;align-items:flex-end}
.mock--phone .mock__hero::before{background-position:70% 20%}
.mock--phone .mock__hero::after{background:linear-gradient(180deg,color-mix(in srgb,var(--m-bg) 55%,transparent) 0%,color-mix(in srgb,var(--m-bg) 92%,transparent) 62%,var(--m-bg) 100%)}
.mock--phone .mock__copy{max-width:none}
.mock--phone .mock__tag{font-size:2.7cqw}
.mock--phone .mock__rule{width:30cqw;height:.5cqw;margin:3cqw 0 5cqw}
.mock--phone .mock__title{font-size:19cqw}
.mock--phone .mock__sub{font-size:4.1cqw;max-width:none;margin-top:5cqw}
.mock--phone .mock__btns{flex-direction:column;align-items:flex-start;gap:3cqw;margin-top:6cqw}
.mock--phone .mock__btn{font-size:3.8cqw;padding:3.4cqw 6cqw}
.mock--phone .mock__btn--ghost{border-width:.3cqw}
.mock--phone .mock__ticker{height:12cqw}
.mock--phone .mock__ticker span{font-size:4.6cqw;padding-right:6cqw;gap:2cqw}
.mock--phone .mock__ticker span::after{margin-left:4cqw;width:1.5cqw;height:1.5cqw}
.mock--phone .mock__ticker::after{height:1.8cqw;animation-name:mockStripePhone}
@keyframes mockStripePhone{to{transform:translateX(9.334cqw)}}
.mock--phone .mock__ticker::after{background:repeating-linear-gradient(135deg,var(--m-ac) 0 2.2cqw,var(--m-tx) 2.2cqw 4.4cqw,#000 4.4cqw 6.6cqw)}
.mock--phone .mock__kicker{font-size:2.8cqw;margin-bottom:3cqw}
.mock--phone .mock__h{font-size:9.5cqw;max-width:none}
.mock--phone .mock__services{height:136cqw;padding:10cqw 7cqw 0}
.mock--phone .mock__intro{font-size:3.4cqw;margin:4cqw 0 6cqw}
.mock--phone .mock__row{grid-template-columns:7cqw 1fr 18cqw;height:24cqw;gap:2cqw}
.mock--phone .mock__row>small{font-size:2.8cqw}
.mock--phone .mock__row b{font-size:5.6cqw}
.mock--phone .mock__row p{font-size:3cqw;margin-top:1.4cqw;line-height:1.3;max-width:none}
.mock--phone .mock__price b{font-size:5.6cqw}
.mock--phone .mock__price small{font-size:2.6cqw;margin-top:1cqw}
.mock--phone .mock__history{height:120cqw;grid-template-columns:1fr;gap:6cqw;padding:10cqw 7cqw 0}
.mock--phone .mock__history .mock__h{margin-bottom:4cqw}
.mock--phone .mock__text{font-size:3.6cqw}
.mock--phone .mock__photo{margin-top:5cqw}
.mock--phone .mock__cards{display:none}
.mock--phone .mock__gallery{height:125cqw;padding:10cqw 7cqw 0}
.mock--phone .mock__gh{margin-bottom:6cqw}
.mock--phone .mock__mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:38cqw;gap:3cqw}
.mock--phone .mock__g1,.mock--phone .mock__g2,.mock--phone .mock__g3,.mock--phone .mock__g4{grid-column:span 1;grid-row:auto}
.mock--phone .mock__g5{display:none}
.mock--phone .mock__reviews{height:135cqw;padding:10cqw 7cqw 0}
.mock--phone .mock__rate{gap:4cqw;margin:5cqw 0 7cqw;padding-bottom:4cqw}
.mock--phone .mock__rate b{font-size:20cqw}
.mock--phone .mock__rate span{font-size:4cqw}
.mock--phone .mock__rate small{font-size:3cqw}
.mock--phone .mock__revs{grid-template-columns:1fr;gap:4cqw}
.mock--phone .mock__rev{min-height:0;padding:5cqw}
.mock--phone .mock__rev:nth-child(n+3){display:none}
.mock--phone .mock__rev:nth-child(2){transform:rotate(.8deg)}
.mock--phone .mock__rev b{font-size:4.4cqw}
.mock--phone .mock__rev small{font-size:2.6cqw;margin-top:3cqw}
.mock--phone .mock__location{height:150cqw;grid-template-columns:1fr;gap:6cqw;padding:10cqw 7cqw 0}
.mock--phone .mock__addr{font-size:4cqw;margin:4cqw 0 5cqw}
.mock--phone .mock__hours div{font-size:3.2cqw;padding:2.2cqw 0}
.mock--phone .mock__map{height:34cqw;gap:3cqw}
.mock--phone .mock__map b{font-size:3.2cqw}
.mock--phone .mock__pin{width:7cqw;height:7cqw}
.mock--phone .mock__foot{font-size:3.4cqw}

.stage--hero .mock__page{animation:mockScroll 84s ease-in-out 3s infinite}
.stage--hero .phone .mock__page{animation-duration:96s;animation-delay:6s}
@keyframes mockScroll{0%,4%{transform:translateY(0)}11%,16%{transform:translateY(var(--s1))}23%,28%{transform:translateY(var(--s2))}35%,40%{transform:translateY(var(--s3))}47%,52%{transform:translateY(var(--s4))}59%,66%{transform:translateY(var(--shift))}84%,100%{transform:translateY(0)}}

/* ---------- Servicios / propuesta de valor ---------- */
.value{display:grid;gap:clamp(2.5rem,6vw,4rem)}
.value__intro{display:grid;gap:1.4rem;align-content:start;justify-items:start}
.value__list{display:grid;gap:0}
.value__list li{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;padding:1.5rem 0;border-top:1px solid var(--line)}
.value__list li:last-child{border-bottom:1px solid var(--line)}
.value__list h3{font-size:1.2rem;line-height:1.3;letter-spacing:-.01em;font-weight:700;margin-bottom:.3rem}
.value__list p{color:var(--muted);font-size:1rem;line-height:1.6}
.ico{width:3rem;height:3rem;border-radius:1rem;display:grid;place-items:center;background:var(--mist);color:var(--blue);transition:background-color .3s,color .3s,transform .4s var(--ease)}
.ico svg{width:1.45rem;height:1.45rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.value__list li:hover .ico{background:var(--blue);color:#fff;transform:rotate(-6deg)}
@media (min-width:62rem){
  .value{grid-template-columns:.85fr 1.15fr;align-items:start}
  .value__intro{position:sticky;top:calc(var(--hh) + 2rem)}
}
@media (min-width:48rem) and (max-width:61.99rem){
  .value__list{grid-template-columns:1fr 1fr;column-gap:2.5rem}
  .value__list li:nth-last-child(2){border-bottom:1px solid var(--line)}
}

/* ---------- Cómo funciona ---------- */
.steps{position:relative;margin-top:1rem}
.steps__path{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.steps__base{stroke:#C3D4F1;stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round}
.steps__prog{stroke:var(--blue);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(22,155,250,.6))}
.steps__plane{fill:var(--blue);opacity:0}
.js .steps--ready .steps__plane{opacity:1}
.steps__list{position:relative;display:grid;gap:0}
.step{position:relative;padding:0 0 2.6rem 3.4rem}
.step:last-child{padding-bottom:0}
.step__dot{position:absolute;left:0;top:.55rem;width:1.15rem;height:1.15rem;border-radius:50%;background:#fff;border:3px solid var(--cyan);box-shadow:0 0 0 6px rgba(56,221,242,.18);transition:background-color .4s,border-color .4s,box-shadow .4s}
.step__n{display:block;font-size:2.6rem;line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--blue);transition:color .4s,-webkit-text-stroke-color .4s;margin-bottom:.4rem}
.step h3{font-size:1.4rem;line-height:1.2;letter-spacing:-.015em;font-weight:700}
.step p{margin-top:.45rem;color:var(--muted);max-width:19rem}
.js .step:not(.on) .step__n{color:transparent;-webkit-text-stroke:1.5px #9DB7E6}
.js .step:not(.on) .step__dot{border-color:#B9CBEA;box-shadow:none}
.js .step.on .step__dot{background:var(--blue);border-color:var(--cyan);box-shadow:0 0 0 7px rgba(22,155,250,.22)}
@media (min-width:62rem){
  .steps__list{grid-template-columns:repeat(4,1fr);gap:2rem}
  .step{padding:3.4rem 0 0}
  .step:nth-child(even){margin-top:4.5rem}
  .step__dot{top:0}
}

/* ---------- Proyectos ---------- */
.projects{display:grid;gap:clamp(1.25rem,3vw,2rem)}
.project{position:relative;border-radius:1.6rem;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.13);overflow:hidden;transition:border-color .3s,transform .4s var(--ease)}
.project:hover{border-color:rgba(56,221,242,.5)}
.project__visual{position:relative;padding:clamp(1rem,3vw,2.4rem);background:radial-gradient(30rem 20rem at 30% 20%,rgba(18,101,232,.45),transparent 70%)}
.project__info{padding:clamp(1.4rem,3.5vw,2.8rem);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1rem}
.badge{display:inline-flex;align-items:center;gap:.55rem;border:1px solid rgba(56,221,242,.5);color:var(--cyan);border-radius:99px;padding:.3rem .85rem;font-size:.82rem;font-weight:500;line-height:1.4}
.badge::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--cyan)}
.badge--real{border-color:rgba(255,255,255,.6);color:#fff}
.badge--real::before{background:#fff}
.project__name{font-size:clamp(1.7rem,1.2rem + 2vw,2.6rem);line-height:1.08;letter-spacing:-.02em;font-weight:700;overflow-wrap:anywhere}
.project__meta{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.2rem;font-size:.98rem}
.project__meta dt{color:var(--muted-d)}
.project__meta dd{font-weight:500}
.project__desc{color:var(--muted-d);font-size:.98rem;max-width:26rem}
.project__soon{color:var(--muted-d);font-size:.95rem;display:inline-flex;align-items:center;gap:.6rem}
.project__soon::before{content:"";width:1.4rem;height:1px;background:var(--muted-d)}
.project--featured .stage{max-width:none;padding-bottom:1.4rem}
.browser{position:relative;width:88%;border-radius:.9rem;overflow:hidden;background:#0B1431;border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 60px -20px rgba(0,0,0,.65)}
.browser__bar{display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem;background:#0F1A3F}
.browser__bar i{width:.6rem;height:.6rem;border-radius:50%;background:rgba(255,255,255,.22)}
.browser__bar span{margin-left:.6rem;font-size:.72rem;color:var(--muted-d);background:rgba(255,255,255,.07);border-radius:99px;padding:.12rem .8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser__view{position:relative;aspect-ratio:16/10;overflow:hidden}
.project--featured .phone{width:24%;bottom:0;right:0}
.project .mock__page{transition:transform 7s cubic-bezier(.45,0,.25,1)}
.project:hover .mock__page,.project:focus-within .mock__page{transform:translateY(var(--shift))}
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:object-position 6s cubic-bezier(.45,0,.25,1)}
.project:hover .shot,.project:focus-within .shot{object-position:bottom}

.projects__grid{display:grid;gap:clamp(1.25rem,3vw,2rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.project--card .thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy-900)}
.project--card .project__info{padding:1.4rem 1.5rem 1.7rem;justify-content:flex-start}
.project--card .project__name{font-size:1.5rem}
.project--slot{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1rem;padding:clamp(1.5rem,4vw,2.4rem);border-style:dashed;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.03);min-height:13rem}
.project--slot h3{font-size:clamp(1.3rem,1.1rem + .9vw,1.7rem);line-height:1.2;letter-spacing:-.015em;font-weight:700;max-width:22rem}
.project--slot p{color:var(--muted-d);max-width:26rem}
.project--slot svg{width:2rem;height:2rem;fill:var(--cyan)}
.project--slot:only-child{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}
.projects__note{margin-top:1.8rem;max-width:44rem;font-size:.92rem;color:var(--muted-d)}
@media (min-width:62rem){
  .project--featured{display:grid;grid-template-columns:1.4fr 1fr}
}

/* ---------- Planes ---------- */
.plans{display:grid;gap:1.5rem;max-width:58rem;margin-inline:auto}
.plans__fallback{text-align:center;color:var(--muted)}
.plan{position:relative;display:flex;flex-direction:column;gap:1.6rem;border-radius:1.8rem;padding:clamp(1.5rem,4vw,2.5rem);background:#fff;border:1.5px solid var(--line);box-shadow:0 30px 60px -40px rgba(7,27,73,.35)}
.plan h3{font-size:1.3rem;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:.7rem}
.plan h3::before{content:"";width:1.7rem;height:.3rem;border-radius:1rem;background:var(--grad)}
.plan__price{display:grid;gap:1rem;justify-items:start}
.plan__amount{display:block;font-weight:700;letter-spacing:-.04em;line-height:1}
.plan__initial .plan__amount{font-size:clamp(3.6rem,2.4rem + 6vw,5rem)}
.plan__monthly .plan__amount{font-size:clamp(2rem,1.5rem + 2.4vw,2.7rem);letter-spacing:-.03em}
.plan__amount small{font-size:.5em;font-weight:500;letter-spacing:0;margin-left:.15em;opacity:.8}
.plan__label{display:block;margin-top:.45rem;font-size:.95rem;color:var(--muted)}
.plan__plus{width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;background:var(--cyan);color:var(--navy);font-weight:700;font-size:1.3rem;line-height:1}
.plan__list{display:grid;gap:.7rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.plan__list li{display:flex;gap:.7rem;align-items:flex-start;font-size:.98rem;line-height:1.5}
.plan__list svg{flex:none;width:1.3rem;height:1.3rem;margin-top:.12rem;padding:.2rem;border-radius:50%;background:rgba(18,101,232,.12);fill:none;stroke:var(--blue);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.plan .btn{margin-top:auto}
.plan--pro{background:linear-gradient(160deg,#0B2A6E 0%,#071B49 55%,#05153D 100%);color:#fff;border-color:rgba(56,221,242,.45);box-shadow:0 40px 80px -36px rgba(18,101,232,.75),0 0 0 1px rgba(56,221,242,.12) inset}
.plan--pro .plan__label{color:var(--muted-d)}
.plan--pro .plan__list{border-top-color:rgba(255,255,255,.14)}
.plan--pro .plan__list svg{background:rgba(56,221,242,.16);stroke:var(--cyan)}
.plan--pro .btn{background:var(--cyan);color:var(--navy);box-shadow:0 8px 28px -8px rgba(56,221,242,.6)}
.plan--pro .btn:hover{background:#6AE8F7;box-shadow:0 14px 34px -8px rgba(56,221,242,.8)}
@media (min-width:48rem){.plans{grid-template-columns:1fr 1fr}}
.plan.reveal{transition-delay:var(--d,0s)}

/* ---------- Mantenimiento ---------- */
.maint{display:grid;gap:clamp(2.5rem,6vw,4rem);align-items:center}
.maint__lead{position:relative}
.maint__orbit{position:absolute;right:-1.5rem;bottom:-3.5rem;width:min(14rem,46%);opacity:.4;pointer-events:none;animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.maint__price{position:relative;font-size:clamp(3.6rem,2rem + 9vw,8rem);line-height:.95;font-weight:700;letter-spacing:-.05em;background:linear-gradient(110deg,#fff 10%,var(--cyan) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.maint__price small{font-size:.28em;letter-spacing:0;font-weight:500;margin-left:.2em;-webkit-text-fill-color:var(--muted-d)}
.maint__title{position:relative;margin-top:1.5rem;font-size:clamp(1.7rem,1.2rem + 2vw,2.5rem);line-height:1.12;letter-spacing:-.02em;font-weight:700;max-width:28rem;text-wrap:balance}
.maint__text{position:relative;margin-top:1rem;font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);line-height:1.5;color:#C9DAF7;max-width:28rem}
.maint__list{display:grid;gap:0;border-left:1px solid rgba(255,255,255,.18);margin-left:.6rem}
.maint__list li{position:relative;padding:0 0 2rem 2rem}
.maint__list li:last-child{padding-bottom:0}
.maint__list li::before{content:"";position:absolute;left:-.45rem;top:.5rem;width:.9rem;height:.9rem;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 5px rgba(56,221,242,.2)}
.maint__list h3{font-size:1.2rem;line-height:1.3;font-weight:700;letter-spacing:-.01em}
.maint__list p{margin-top:.35rem;color:var(--muted-d);max-width:30rem}
.maint__note{margin-top:1.4rem;color:var(--muted-d);font-size:.95rem}
@media (min-width:62rem){.maint{grid-template-columns:1fr 1fr;gap:5rem}}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:2.5rem}
.faq__head{display:grid;gap:1.2rem;justify-items:start;align-content:start}
.faq__item{border-top:1px solid var(--line)}
.faq__item:last-child{border-bottom:1px solid var(--line)}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:1.3rem 0;background:none;border:0;text-align:left;font-size:clamp(1.02rem,.98rem + .3vw,1.18rem);font-weight:500;line-height:1.4;color:var(--ink)}
.faq__q:hover{color:var(--blue)}
.faq__plus{flex:none;position:relative;width:2.1rem;height:2.1rem;border-radius:50%;background:#fff;border:1.5px solid var(--line);transition:background-color .3s,border-color .3s,transform .4s var(--ease)}
.faq__plus::before,.faq__plus::after{content:"";position:absolute;left:50%;top:50%;width:.8rem;height:2px;margin:-1px 0 0 -.4rem;background:var(--blue);border-radius:2px;transition:transform .35s var(--ease),background-color .3s}
.faq__plus::after{transform:rotate(90deg)}
.faq__item.open .faq__plus{background:var(--blue);border-color:var(--blue);transform:rotate(180deg)}
.faq__item.open .faq__plus::before,.faq__item.open .faq__plus::after{background:#fff}
.faq__item.open .faq__plus::after{transform:rotate(0)}
.faq__a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .45s var(--ease),visibility 0s linear .45s}
.faq__item.open .faq__a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .45s var(--ease),visibility 0s}
.faq__a>div{overflow:hidden}
.faq__a p{padding:0 3.2rem 1.4rem 0;color:var(--muted);max-width:40rem}
@media (min-width:62rem){
  .faq{grid-template-columns:.8fr 1.2fr;gap:5rem}
  .faq__head{position:sticky;top:calc(var(--hh) + 2rem)}
}

/* ---------- Contacto ---------- */
.contact{background:radial-gradient(50rem 32rem at 100% 0%,rgba(18,101,232,.5),transparent 65%),radial-gradient(34rem 24rem at 0% 100%,rgba(56,221,242,.12),transparent 65%),var(--deep)}
.contact__grid{display:grid;gap:clamp(2.2rem,5vw,3.5rem);align-items:start}
.contact__copy{display:grid;gap:1.3rem;align-content:start}
.contact__voice{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.2rem,1.1rem + .6vw,1.5rem);line-height:1.45;color:#C9DAF7;max-width:26rem}
.contact__links{display:grid;gap:.8rem;margin-top:.6rem;max-width:22rem}
.contact__link{display:flex;align-items:center;gap:1rem;padding:.9rem 1.1rem;border-radius:1.1rem;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);text-decoration:none;transition:border-color .25s,background-color .25s,transform .3s var(--ease)}
.contact__link:hover{border-color:var(--cyan);background:rgba(56,221,242,.08);transform:translateX(4px)}
.contact__link svg{flex:none;width:1.6rem;height:1.6rem;fill:none;stroke:var(--cyan);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.contact__link span{display:grid;line-height:1.3;min-width:0}
.contact__link small{color:var(--muted-d);font-size:.82rem}
.contact__link b{font-weight:700;overflow-wrap:anywhere}
@media (min-width:62rem){.contact__grid{grid-template-columns:.85fr 1.15fr}}

.form-card{background:#fff;color:var(--ink);border-radius:1.8rem;padding:clamp(1.25rem,4vw,2.5rem);box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
#contact-form{display:grid;gap:1.15rem}
.field{display:grid;gap:.4rem;min-width:0}
.field-row{display:grid;gap:1.15rem}
@media (min-width:36rem){.field-row{grid-template-columns:1fr 1fr}}
.field label{font-weight:500;font-size:.95rem}
.opt{font-weight:400;color:var(--muted)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field textarea{width:100%;font-size:1rem;line-height:1.4;padding:.85rem 1rem;border:1.5px solid #BFCEEA;border-radius:.85rem;background:#F6F9FF;transition:border-color .2s,box-shadow .2s,background-color .2s;-webkit-appearance:none;appearance:none}
.field textarea{resize:vertical;min-height:7.5rem}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(18,101,232,.18)}
.field.is-invalid input,.field.is-invalid textarea{border-color:#C62828;background:#FFF8F8}
.field__err{color:#B3261E;font-size:.86rem;line-height:1.4}
.field__err:empty{display:none}
.field--check{grid-template-columns:auto 1fr;column-gap:.8rem;align-items:start}
.field--check input{width:1.3rem;height:1.3rem;margin:.15rem 0 0;accent-color:var(--blue)}
.field--check label{font-weight:400;font-size:.9rem;line-height:1.5;color:var(--muted)}
.field--check label a{color:var(--blue);font-weight:500}
.field--check .field__err{grid-column:1/-1}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.plan-chip{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.55rem .6rem .55rem 1rem;border-radius:99px;background:var(--mist);border:1px solid var(--line);font-size:.92rem}
.plan-chip button{flex:none;width:2rem;height:2rem;border-radius:50%;border:0;background:#fff;color:var(--ink);font-size:1.2rem;line-height:1}
.form-status{font-size:.95rem;line-height:1.5;border-radius:.9rem;padding:.8rem 1rem}
.form-status:empty{display:none}
.form-status.is-error{background:#FDECEA;color:#8A1C14;border:1px solid #F4B9B3}
.form-status a{color:inherit;font-weight:700}
.btn__spin{display:none;width:1.1rem;height:1.1rem;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
.is-loading .btn__spin{display:inline-block}
.form-success{display:grid;justify-items:center;text-align:center;gap:.9rem;padding:2rem 0}
.form-success:focus{outline:none}
.form-success svg{width:4.5rem;height:4.5rem;fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.form-success circle{stroke-dasharray:190;stroke-dashoffset:190;animation:draw2 .9s var(--ease) forwards}
.form-success path{stroke:var(--cyan);stroke-dasharray:60;stroke-dashoffset:60;animation:draw2 .6s var(--ease) .6s forwards}
@keyframes draw2{to{stroke-dashoffset:0}}
.form-success h3{font-size:1.6rem;font-weight:700;letter-spacing:-.02em}
.form-success p{color:var(--muted);max-width:24rem}

/* ---------- Footer ---------- */
.footer{background:#020818;color:#fff;padding:clamp(3rem,6vw,4.5rem) 0 1.5rem}
.footer__grid{display:grid;gap:2.2rem}
.footer__brand{display:grid;gap:.9rem;justify-items:start;color:var(--muted-d)}
.footer__brand a:not(.brand){color:#fff;text-underline-offset:.25em}
.footer__h{font-size:.95rem;font-weight:700;margin-bottom:.8rem;color:#fff}
.footer__nav ul{display:grid;gap:.15rem}
.footer__nav a{display:inline-block;padding:.35rem 0;color:var(--muted-d);text-decoration:none;transition:color .2s}
.footer__nav a:hover{color:var(--cyan)}
.footer__bottom{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.1);font-size:.88rem;color:var(--muted-d)}
@media (min-width:48rem){.footer__grid{grid-template-columns:1.4fr 1fr 1fr}}

/* ---------- Revelado al hacer scroll (solo con JS) ---------- */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- Páginas legales ---------- */
.legal-page{background:var(--mist)}
.legal-head{background:var(--navy);padding:1.1rem 0}
.legal-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.legal-head .back{color:var(--cyan);font-weight:500;text-decoration:none;padding:.5rem 0}
.legal-head .back:hover{text-decoration:underline}
.legal{max-width:46rem;margin:0 auto;padding:clamp(2.5rem,6vw,4.5rem) var(--gut) clamp(3rem,7vw,5rem)}
.legal h1{font-size:clamp(2rem,1.5rem + 2.5vw,3rem);line-height:1.1;letter-spacing:-.025em;font-weight:700;margin-bottom:1.5rem}
.legal h2{font-size:1.25rem;font-weight:700;margin:2rem 0 .6rem}
.legal p,.legal li{color:var(--muted);margin-bottom:.8rem}
.legal ul{padding-left:1.2rem;list-style:disc}
.legal a{color:var(--blue)}
.legal .pending{margin:1.5rem 0;padding:1rem 1.2rem;border-radius:1rem;background:#fff;border:1.5px dashed #9DB7E6;color:var(--ink)}
.legal .pending b{display:block;margin-bottom:.2rem}
.legal strong{color:var(--ink)}
.legal__updated{margin-top:2.4rem;font-size:.9rem}
.form-privacy-note{font-size:.78rem;line-height:1.55;color:#30457A;background:rgba(255,255,255,.42);border:1px solid rgba(18,101,232,.2);border-radius:.85rem;padding:.8rem .9rem}
.form-privacy-note strong{color:var(--ink)}
.form-privacy-note a{color:var(--navy);font-weight:500;text-underline-offset:.18em}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .orbit__line{stroke-dashoffset:0}
  .orbit__plane{opacity:1}
  .js .reveal{opacity:1;transform:none}
  .project:hover .mock__page,.project:focus-within .mock__page{transform:none}
}

/* Contención de decoraciones que rotan */
.sec--maint{overflow:hidden}


/* ===== Retoques v2 ===== */
/* 1 · Captura real en el portfolio y el hero */
.stage--solo .laptop{width:100%}
.stage--solo .laptop__base{width:108%;margin-left:-4%}
.shot--phone{object-position:top}
.stage--hero .shot{animation:shotScroll 34s ease-in-out 3s infinite}
@keyframes shotScroll{0%,10%{object-position:50% 0%}48%,58%{object-position:50% 100%}92%,100%{object-position:50% 0%}}
.stage--hero .laptop__screen .shot{height:100%}

/* 2 · Fondos con la gama ELANUBE */
.sec--sky{background:radial-gradient(46rem 26rem at 100% 0%,rgba(56,221,242,.22),transparent 65%),radial-gradient(40rem 26rem at 0% 100%,rgba(22,155,250,.12),transparent 65%),linear-gradient(180deg,#EAF6FE 0%,#E0F0FD 100%)}
.sec--sky .ico{background:#fff;box-shadow:0 6px 16px -8px rgba(18,101,232,.45)}
.sec--sky .value__list li,.sec--sky .value__list li:last-child{border-color:rgba(18,101,232,.2)}
.sec--sky .lead,.sec--sky .value__list p{color:#3F5380}
#proyectos{background:radial-gradient(52rem 30rem at 85% 0%,rgba(22,155,250,.38),transparent 62%),radial-gradient(40rem 28rem at 0% 100%,rgba(56,221,242,.14),transparent 65%),linear-gradient(180deg,#071B49 0%,#0A2C78 100%)}
#proyectos .project{background:linear-gradient(160deg,rgba(18,101,232,.3),rgba(7,27,73,.55));border-color:rgba(56,221,242,.28)}
#proyectos .project:hover{border-color:rgba(56,221,242,.65)}
#proyectos .project__visual{background:radial-gradient(30rem 20rem at 30% 15%,rgba(22,155,250,.5),transparent 70%)}
#proyectos .project--slot{background:rgba(18,101,232,.14);border-color:rgba(56,221,242,.4)}
#proyectos .project--card .thumb{background:#071B49}
#proyectos .lead,#proyectos .projects__note,#proyectos .project__desc,#proyectos .project__meta dt,#proyectos .project__soon,#proyectos .project--slot p{color:#BBD0F2}

/* 3 · Flecha viva del hero */
@media (prefers-reduced-motion:reduce){
  .stage--hero .shot{animation:none}
}
.stage--solo .browser{width:100%}


/* ===== Retoques v3 ===== */
:root{--sky-100:color-mix(in srgb,#38DDF2 22%,#fff);--sky-200:color-mix(in srgb,#169BFA 28%,#fff)}

/* Servicios: azul profundo */
.sec--blue{color:#fff;background:radial-gradient(48rem 28rem at 100% 0%,rgba(56,221,242,.34),transparent 62%),radial-gradient(40rem 30rem at 0% 100%,rgba(7,27,73,.55),transparent 65%),linear-gradient(170deg,color-mix(in srgb,#1265E8 82%,#071B49) 0%,color-mix(in srgb,#1265E8 42%,#071B49) 100%)}
.sec--blue .lead{color:rgba(255,255,255,.92)}
.sec--blue .value__list li,.sec--blue .value__list li:last-child{border-color:rgba(255,255,255,.24)}
.sec--blue .value__list h3{color:#fff}
.sec--blue .value__list p{color:rgba(255,255,255,.9)}
.sec--blue .ico{background:rgba(255,255,255,.14);color:var(--cyan);box-shadow:none}
.sec--blue .value__list li:hover .ico{background:var(--cyan);color:var(--navy)}

/* Cómo funciona: marino con luz */
#proceso{background:radial-gradient(44rem 26rem at 8% 0%,rgba(18,101,232,.5),transparent 65%),radial-gradient(36rem 24rem at 100% 100%,rgba(56,221,242,.16),transparent 65%),linear-gradient(180deg,#071B49,#05143A)}
#proceso .step h3{color:#fff}
#proceso .step p{color:var(--muted-d)}
#proceso .steps__base{stroke:rgba(255,255,255,.3)}
#proceso .steps__prog{stroke:var(--cyan);filter:drop-shadow(0 0 7px rgba(56,221,242,.7))}
#proceso .steps__plane{fill:var(--cyan)}
#proceso .step__n{color:var(--cyan)}
#proceso .step__dot{background:var(--navy);border-color:var(--cyan);box-shadow:0 0 0 6px rgba(56,221,242,.16)}
.js #proceso .step:not(.on) .step__n{color:transparent;-webkit-text-stroke:1.5px rgba(169,188,221,.55)}
.js #proceso .step:not(.on) .step__dot{border-color:rgba(255,255,255,.35);box-shadow:none}
.js #proceso .step.on .step__dot{background:var(--cyan);border-color:#fff;box-shadow:0 0 0 7px rgba(56,221,242,.25)}

/* Proyectos: más azul */
#proyectos{background:radial-gradient(52rem 30rem at 85% 0%,rgba(22,155,250,.5),transparent 62%),radial-gradient(40rem 28rem at 0% 100%,rgba(56,221,242,.16),transparent 65%),linear-gradient(180deg,#071B49 0%,color-mix(in srgb,#1265E8 50%,#071B49) 100%)}

/* Precios y FAQ: azul claro con color (no blanco) */
.sec--sky2{--muted:#2F447A;background:radial-gradient(46rem 26rem at 100% 0%,rgba(56,221,242,.32),transparent 65%),radial-gradient(40rem 28rem at 0% 100%,rgba(18,101,232,.22),transparent 65%),linear-gradient(180deg,var(--sky-100),var(--sky-200))}
.sec--sky2 .plan:not(.plan--pro){background:linear-gradient(160deg,#fff,var(--sky-100));border-color:rgba(18,101,232,.3)}
.sec--sky2 .faq__item,.sec--sky2 .faq__item:last-child{border-color:rgba(18,101,232,.3)}
.sec--sky2 .faq__plus{background:rgba(255,255,255,.65);border-color:rgba(18,101,232,.35)}
.sec--sky2 .faq__item.open .faq__plus{background:var(--blue);border-color:var(--blue)}
.sec--sky2 .btn--blue{background:var(--navy);box-shadow:0 8px 26px -10px rgba(7,27,73,.7)}
.sec--sky2 .btn--blue:hover{background:#0B2A6E}

/* Formulario: azul claro en lugar de blanco */
.form-card{--muted:#30457A;background:linear-gradient(165deg,color-mix(in srgb,#38DDF2 14%,#fff),color-mix(in srgb,#169BFA 24%,#fff))}
.field input[type=text],.field input[type=email],.field input[type=tel],.field textarea{background:rgba(255,255,255,.72);border-color:rgba(18,101,232,.38)}
.field input:focus,.field textarea:focus{background:#fff}
.plan-chip{background:rgba(255,255,255,.6);border-color:rgba(18,101,232,.3)}

/* Flecha del hero: movimiento continuo y lento */


/* ===== Retoques v4 ===== */
/* Planes */
.plans{max-width:62rem}
.plan{gap:1.2rem}
.plan__price{gap:.8rem}
.plan__plus{width:1.9rem;height:1.9rem;font-size:1.1rem}
.plan__vat{margin-top:-.3rem;font-size:.82rem;color:var(--muted)}
.plan__more{color:inherit;font-weight:500;text-underline-offset:.2em}
.plan__list{gap:.5rem;padding-top:1.2rem}
.plan__list li{font-size:.94rem;line-height:1.45}
.plan__list li.is-lead{font-weight:700}

.sec--sky2 .plan.plan--esencia{background:linear-gradient(155deg,color-mix(in srgb,#38DDF2 30%,#fff) 0%,color-mix(in srgb,#169BFA 24%,#fff) 100%);border:1.5px solid rgba(18,101,232,.38);color:var(--ink);box-shadow:0 30px 60px -38px rgba(7,27,73,.5)}
.plan--esencia .plan__list{border-top-color:rgba(18,101,232,.28)}
.plan--esencia .plan__list svg{background:var(--blue);stroke:#fff}
.plan--esencia .plan__plus{background:var(--blue);color:#fff}
.plan--esencia .plan__label,.plan--esencia .plan__vat{color:#2B4078}
.plan .btn.btn--plan{margin-top:auto;width:100%;min-height:3.2rem;box-shadow:none}
.plan--esencia .btn.btn--plan{background:var(--navy);color:#fff;border-color:var(--navy)}
.plan--esencia .btn.btn--plan:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(18,101,232,.8)}
.plan--esencia .btn.btn--plan:focus-visible{outline:3px solid var(--navy);outline-offset:3px;background:var(--blue)}

.sec--sky2 .plan.plan--pro{background:linear-gradient(155deg,#071B49 0%,color-mix(in srgb,#1265E8 55%,#071B49) 62%,color-mix(in srgb,#1265E8 82%,#071B49) 100%);border:1.5px solid rgba(56,221,242,.6);color:#fff;box-shadow:0 40px 80px -36px rgba(18,101,232,.85),0 0 0 1px rgba(56,221,242,.15) inset}
.plan--pro .plan__label,.plan--pro .plan__vat{color:#D6E5FC}
.plan--pro .plan__plus{background:var(--cyan);color:var(--navy)}
.plan--pro .plan__list{border-top-color:rgba(255,255,255,.22)}
.plan--pro .plan__list svg{background:rgba(56,221,242,.2);stroke:var(--cyan)}
.plan--pro .btn.btn--plan{background:var(--cyan);color:var(--navy);border-color:var(--cyan);box-shadow:0 10px 30px -10px rgba(56,221,242,.7)}
.plan--pro .btn.btn--plan:hover{background:#fff;border-color:#fff;color:var(--navy);transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(255,255,255,.55)}
.plan--pro .btn.btn--plan:focus-visible{outline:3px solid #fff;outline-offset:3px;background:#fff}
.sec--sky2 :focus-visible{outline-color:var(--navy)}
.sec--sky2 .plan--pro :focus-visible{outline-color:#fff}

/* Mantenimiento */
.maint__list li.maint__excl{padding-top:.4rem}
.maint__excl p{margin:0;font-size:.88rem;color:var(--muted-d);opacity:.85;max-width:30rem;line-height:1.5}
.maint__list h3{font-size:1.15rem}


@media (prefers-reduced-motion:reduce){
  .mock__ticker>div,.mock__ticker::after,.mock__hero::before,.mock__pin{animation:none}
}

.mock__services,.mock__history,.mock__gallery,.mock__reviews,.mock__location{overflow:hidden}


/* ===== Retoques v5 ===== */
/* Hero: la línea completa (con su punta) flota y una luz la recorre, de forma continua */
.orbit__tip{opacity:0;animation:tipIn .8s ease-out 2.6s forwards}
@keyframes tipIn{to{opacity:.8}}

/* Formulario: campos en azul claro de la paleta */
.field input[type=text],.field input[type=email],.field input[type=tel],.field textarea{background:color-mix(in srgb,#169BFA 30%,#fff);border-color:rgba(18,101,232,.55);color:var(--navy)}
.field input:focus,.field textarea:focus{background:color-mix(in srgb,#38DDF2 22%,#fff);border-color:var(--blue)}
.field.is-invalid input,.field.is-invalid textarea{background:color-mix(in srgb,#169BFA 30%,#fff);border-color:#C62828}
.field input:-webkit-autofill{-webkit-text-fill-color:var(--navy);box-shadow:0 0 0 100px color-mix(in srgb,#169BFA 30%,#fff) inset}
@media (prefers-reduced-motion:reduce){
  .orbit__tip{opacity:.8;animation:none}
}


/* ===== Retoques v6 ===== */
/* Hero: reflejo de luz que recorre la propia flecha (la flecha no se mueve) */
.orbit__pulse{stroke-dasharray:.05 3;stroke-dashoffset:.05;opacity:0;filter:drop-shadow(0 0 4px rgba(56,221,242,.9));animation:pulseRun 9s linear 4s infinite}
@keyframes pulseRun{0%{stroke-dashoffset:.05;opacity:0}4%{opacity:.9}22%{opacity:.9}28%{stroke-dashoffset:-1;opacity:0}100%{stroke-dashoffset:-1;opacity:0}}

/* Contacto: el recuadro general lleva el color */
.form-card{--muted:#071B49;background:radial-gradient(28rem 18rem at 0% 0%,rgba(255,255,255,.28),transparent 70%),linear-gradient(155deg,#38DDF2 0%,color-mix(in srgb,#38DDF2 50%,#169BFA) 48%,#169BFA 100%);color:var(--navy);border:1px solid rgba(255,255,255,.5);box-shadow:0 40px 90px -34px rgba(56,221,242,.55),0 0 0 1px rgba(7,27,73,.12),inset 0 1px 0 rgba(255,255,255,.55)}
.form-card .field label{color:var(--navy)}
.form-card .opt{color:var(--navy);opacity:.78}
.form-card .field input[type=text],.form-card .field input[type=email],.form-card .field input[type=tel],.form-card .field textarea{background:rgba(255,255,255,.4);border:1.5px solid rgba(7,27,73,.42);color:var(--navy)}
.form-card .field input:focus,.form-card .field textarea:focus{background:rgba(255,255,255,.66);border-color:var(--navy);box-shadow:0 0 0 4px rgba(7,27,73,.22)}
.form-card .field.is-invalid input,.form-card .field.is-invalid textarea{background:rgba(255,255,255,.5);border-color:#7A0F0F}
.form-card .field__err{color:#6E0C0C;font-weight:500}
.form-card .field input:-webkit-autofill{-webkit-text-fill-color:var(--navy);box-shadow:0 0 0 100px color-mix(in srgb,#fff 45%,#38DDF2) inset}
.form-card .field--check input{accent-color:var(--navy)}
.form-card .field--check label{color:var(--navy);font-weight:400}
.form-card .field--check label a{color:var(--navy);font-weight:700;text-underline-offset:.2em}
.form-card .plan-chip{background:rgba(7,27,73,.14);border-color:rgba(7,27,73,.32);color:var(--navy)}
.form-card .plan-chip button{background:rgba(255,255,255,.7);color:var(--navy)}
.form-card .btn--blue{background:var(--navy);color:#fff;box-shadow:0 12px 28px -12px rgba(7,27,73,.8)}
.form-card .btn--blue:hover{background:#0B2A6E}
.form-card :focus-visible{outline-color:var(--navy)}
.form-card .form-success svg{stroke:var(--navy)}
.form-card .form-success path{stroke:#fff}
.form-card .form-success p{color:var(--navy)}

@media (prefers-reduced-motion:reduce){
  .orbit__pulse{display:none}
}


/* ===== Fase 2: contacto y demo real ===== */
.project__cover{position:absolute;inset:0;z-index:5;cursor:pointer}
.project--card .thumb{position:relative}
.footer__brand p a{overflow-wrap:anywhere}