/* ==========================================================================
   MOVIL-TECH ROMA — capa de interacción (aditiva)
   Todo suma sobre styles.css: no cambia colores de marca ni el fondo claro.
   ========================================================================== */

:root{
  --fx-azul:#0663F5;
  --fx-azul-2:#59A6FF;
  --fx-ease:cubic-bezier(.16,.84,.44,1);
}

/* ------------------------------------------------ barra de progreso arriba */
.fxBar{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:200;
  background:linear-gradient(90deg,#0663F5,#59A6FF 60%,#8FC6FF);
  box-shadow:0 0 14px rgba(6,99,245,.55);
  transition:width .08s linear; pointer-events:none;
}

/* ----------------------------------------------------- luz que sigue el mouse */
.fxSpot{
  position:fixed; top:0; left:0; width:420px; height:420px; z-index:0;
  margin:-210px 0 0 -210px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(6,99,245,.16),rgba(6,99,245,.05) 45%,transparent 70%);
  opacity:0; transition:opacity .5s ease; will-change:transform;
}
.fxSpot.is-on{ opacity:1; }

/* ------------------------------------------------------------- apariciones */
.fx-rv{ opacity:0; will-change:transform,opacity; }
.fx-rv[data-fx="up"]{ transform:translateY(30px); }
.fx-rv[data-fx="left"]{ transform:translateX(-38px); }
.fx-rv[data-fx="right"]{ transform:translateX(38px); }
.fx-rv[data-fx="zoom"]{ transform:scale(.9); }
.fx-rv[data-fx="flip"]{ transform:perspective(900px) rotateX(14deg) translateY(24px); }
.fx-rv[data-fx="blur"]{ transform:translateY(18px); filter:blur(9px); }
.fx-rv.fx-in{
  opacity:1; transform:none; filter:none;
  transition:opacity .72s var(--fx-ease), transform .72s var(--fx-ease), filter .72s var(--fx-ease);
  transition-delay:var(--fx-d,0ms);
}

/* palabras del título del hero */
.fxWord{ display:inline-block; opacity:0; transform:translateY(26px) rotate(4deg); }
.is-ready .fxWord{
  animation:fxWordIn .8s var(--fx-ease) forwards;
  animation-delay:var(--fx-d,0ms);
}
@keyframes fxWordIn{ to{ opacity:1; transform:none; } }

/* --------------------------------------------------------------- botones */
.btn{ position:relative; overflow:hidden; isolation:isolate; }
.btn > *{ position:relative; z-index:2; }
.btn::before{
  content:""; position:absolute; inset:0; z-index:1; opacity:0;
  background:linear-gradient(112deg,transparent 22%,rgba(255,255,255,.55) 48%,transparent 74%);
  transform:translateX(-120%);
}
.btn:hover::before{ opacity:1; animation:fxSweep .9s var(--fx-ease); }
@keyframes fxSweep{ to{ transform:translateX(120%); } }

.btn{ transition:transform .3s var(--fx-ease), box-shadow .3s var(--fx-ease), background-color .3s var(--fx-ease); }
.btn:hover{ box-shadow:0 14px 30px rgba(6,99,245,.28); }
.btn:active{ transform:scale(.97); }
.btn__waCircle{ transition:transform .35s var(--fx-ease); }
.btn:hover .btn__waCircle{ transform:rotate(-12deg) scale(1.12); }
.btn:hover .ico--arrow{ animation:fxArrow .7s var(--fx-ease); }
@keyframes fxArrow{ 40%{ transform:translateX(6px); } 100%{ transform:translateX(0); } }

.fxRipple{
  position:absolute; z-index:1; border-radius:50%; pointer-events:none;
  background:rgba(255,255,255,.5); transform:scale(0);
  animation:fxRip .65s ease-out forwards;
}
@keyframes fxRip{ to{ transform:scale(3.4); opacity:0; } }

/* --------------------------------------------------------------- tarjetas */
.fx-card{
  position:relative;
  transition:transform .35s var(--fx-ease), box-shadow .35s var(--fx-ease), border-color .35s var(--fx-ease);
}
.fx-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .35s ease;
  background:radial-gradient(320px circle at var(--fx-mx,50%) var(--fx-my,50%),rgba(6,99,245,.12),transparent 62%);
}
.fx-card:hover::after{ opacity:1; }
.fx-card:hover{ box-shadow:0 20px 44px rgba(11,42,90,.14); }
.fx-tilt{ transform-style:preserve-3d; }

/* borde vivo en las tarjetas de servicio y trabajo
   (garCard ya usa ::before para su propio brillo, por eso queda fuera) */
.svcCard,.trabCard,.accCard,.faqItem,.stat,.testi{ position:relative; }
.svcCard::before,.trabCard::before{
  content:""; position:absolute; left:0; top:0; height:3px; width:0; z-index:3;
  background:linear-gradient(90deg,var(--fx-azul),var(--fx-azul-2));
  transition:width .45s var(--fx-ease);
}
.svcCard:hover::before,.trabCard:hover::before{ width:100%; }

/* los pasos no llevan brillo (su ::after es la línea que los une) */
.step{ transition:transform .35s var(--fx-ease); }
.step:hover{ transform:translateY(-6px); }

/* --------------------------------------------------------------- imágenes */
.fxImg{ overflow:hidden; }
.fxImg img{ transition:transform .7s var(--fx-ease), filter .5s var(--fx-ease); }
.fxImg:hover img{ transform:scale(1.07); filter:saturate(1.12) contrast(1.04); }
.fxZoom{ cursor:zoom-in; }

.fx-rv[data-fx="wipe"] img{ clip-path:inset(0 100% 0 0); }
.fx-rv.fx-in[data-fx="wipe"] img{ clip-path:inset(0 0 0 0); transition:clip-path .9s var(--fx-ease); }

/* flotación suave del arte del hero y de la promo */
.hero__art img{ animation:fxFloat 7s ease-in-out infinite; }
.promo__art img{ animation:fxFloat 8.5s ease-in-out infinite .6s; }
@keyframes fxFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

/* burbujas de luz detrás del hero (fondo claro, nada oscuro) */
.fxBlobs{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.fxBlob{
  position:absolute; border-radius:50%; filter:blur(46px); opacity:.5;
  background:radial-gradient(circle,rgba(6,99,245,.30),transparent 70%);
  animation:fxDrift 18s ease-in-out infinite;
}
.fxBlob:nth-child(2){ background:radial-gradient(circle,rgba(89,166,255,.32),transparent 70%); animation-duration:23s; animation-delay:-6s; }
.fxBlob:nth-child(3){ background:radial-gradient(circle,rgba(0,196,255,.22),transparent 70%); animation-duration:27s; animation-delay:-12s; }
@keyframes fxDrift{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  33%{ transform:translate3d(38px,-30px,0) scale(1.12); }
  66%{ transform:translate3d(-30px,26px,0) scale(.94); }
}

/* --------------------------------------------------------------- header */
.hdr{ transition:transform .4s var(--fx-ease), box-shadow .35s var(--fx-ease), background-color .35s var(--fx-ease); }
.hdr.fx-hide{ transform:translateY(-104%); }
.hdr.is-stuck{ box-shadow:0 10px 34px rgba(11,42,90,.10); }
.hdr .brand__mark img{ transition:transform .6s var(--fx-ease), filter .4s var(--fx-ease); }
.brand:hover .brand__mark img{ transform:rotate(-6deg) scale(1.1); filter:drop-shadow(0 8px 16px rgba(6,99,245,.35)); }

.nav__link{ position:relative; }
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; margin:auto;
  width:0; border-radius:2px; background:linear-gradient(90deg,var(--fx-azul),var(--fx-azul-2));
  transition:width .32s var(--fx-ease);
}
.nav__link:hover::after,.nav__link.is-active::after{ width:100%; }
.nav__link:hover{ transform:translateY(-1px); }

/* --------------------------------------------------------------- marcas */
.fxMarquee{
  overflow:hidden; margin-top:11px; padding:16px 0;
  background:#fff; border:1px solid var(--linea-2); border-radius:var(--r-md);
  box-shadow:var(--sh-card);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.brands.fx-track{
  display:flex !important; grid-template-columns:none !important;
  width:max-content; gap:56px; border:0; box-shadow:none; background:transparent;
  animation:fxScroll 34s linear infinite;
}
.brands.fx-track li{ flex:none; }
.fxMarquee:hover .brands.fx-track{ animation-play-state:paused; }
@keyframes fxScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.brands.fx-track svg{ transition:transform .3s var(--fx-ease), opacity .3s var(--fx-ease), filter .3s var(--fx-ease); }
.brands.fx-track li:hover svg{ transform:translateY(-4px) scale(1.14); opacity:1; filter:drop-shadow(0 6px 12px rgba(6,99,245,.28)); }

/* --------------------------------------------------------------- detalles */
.perks li,.accPerks li{ transition:transform .3s var(--fx-ease); }
.perks li:hover,.accPerks li:hover{ transform:translateY(-4px); }
.step:hover .step__num{ transform:scale(1.14) rotate(-6deg); }
.stat:hover .stat__v{ transform:scale(1.08); display:inline-block; }
.stat__v{ transition:transform .3s var(--fx-ease); }
.contactList li{ transition:transform .28s var(--fx-ease); }
.contactList li:hover{ transform:translateX(6px); }
.ftr__links a:hover{ padding-left:6px; }
.ftr__social a{ transition:transform .3s var(--fx-ease), box-shadow .3s var(--fx-ease); }
.ftr__social a:hover{ transform:translateY(-4px) rotate(-8deg); }

.faqItem__q:hover{ background:linear-gradient(90deg,rgba(6,99,245,.05),transparent); }
.faqItem.is-open{ box-shadow:0 16px 34px rgba(6,99,245,.12); }

.secTitle__rule{ transition:width .7s var(--fx-ease); }
.fx-rv .secTitle__rule{ width:0; }
.fx-rv.fx-in .secTitle__rule{ width:34px; }

/* pulso del botón flotante cada tanto */
.waFab.fx-call{ animation:fxCall 1.1s var(--fx-ease); }
@keyframes fxCall{
  0%,100%{ transform:scale(1) rotate(0); }
  20%{ transform:scale(1.12) rotate(-9deg); }
  45%{ transform:scale(1.08) rotate(8deg); }
  70%{ transform:scale(1.1) rotate(-5deg); }
}

.toTop{ transition:transform .3s var(--fx-ease), box-shadow .3s var(--fx-ease), opacity .3s ease; }
.toTop:hover{ transform:translateY(-5px); box-shadow:0 14px 26px rgba(6,99,245,.3); }

/* --------------------------------------------------------------- lightbox */
.fxLb{
  position:fixed; inset:0; z-index:300; display:grid; place-items:center;
  background:rgba(244,247,251,.92); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .32s ease;
}
.fxLb.is-on{ opacity:1; pointer-events:auto; }
.fxLb img{
  max-width:92vw; max-height:86vh; border-radius:16px;
  box-shadow:0 30px 80px rgba(11,42,90,.28); transform:scale(.94);
  transition:transform .38s var(--fx-ease); background:#fff;
}
.fxLb.is-on img{ transform:scale(1); }
.fxLb__x{
  position:absolute; top:22px; right:24px; width:44px; height:44px; border-radius:50%;
  border:0; cursor:pointer; background:#fff; color:#0B2A5A; font-size:22px; line-height:1;
  box-shadow:0 10px 24px rgba(11,42,90,.18); transition:transform .25s var(--fx-ease);
}
.fxLb__x:hover{ transform:rotate(90deg) scale(1.08); }

/* --------------------------------------------------- respeto por el usuario */
@media (prefers-reduced-motion: reduce){
  .fx-rv,.fxWord{ opacity:1 !important; transform:none !important; filter:none !important; animation:none !important; }
  .fxBlob,.hero__art img,.promo__art img,.brands.fx-track{ animation:none !important; }
  .fxSpot{ display:none; }
}

@media (max-width:860px){
  .fxSpot{ display:none; }
  .fxBlob{ filter:blur(34px); opacity:.38; }
}