/* =========================================================
   BITSIDEAS — Sección de contacto en lenguaje Fluent
   Malla de color en movimiento, retícula tenue y el efecto
   "reveal": el borde se ilumina donde está el puntero.
   ========================================================= */
.cta{position:relative;overflow:hidden;isolation:isolate;background:var(--bg-soft)}

/* ---------- Malla de color animada ---------- */
.cta__mesh{position:absolute;inset:-18%;z-index:-2;pointer-events:none;filter:blur(72px)}
.cta__mesh span{
  position:absolute;display:block;border-radius:50%;opacity:.55;
  will-change:transform;
}
.cta__mesh span:nth-child(1){
  width:44%;padding-bottom:44%;top:2%;left:-4%;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand-500) 62%,transparent),transparent 68%);
  animation:meshA 22s var(--ease) infinite alternate;
}
.cta__mesh span:nth-child(2){
  width:38%;padding-bottom:38%;top:38%;left:52%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent-500) 55%,transparent),transparent 68%);
  animation:meshB 27s var(--ease) infinite alternate;
}
.cta__mesh span:nth-child(3){
  width:34%;padding-bottom:34%;top:58%;left:12%;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand-400) 48%,transparent),transparent 68%);
  animation:meshC 31s var(--ease) infinite alternate;
}
.cta__mesh span:nth-child(4){
  width:30%;padding-bottom:30%;top:-6%;left:62%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent-400) 45%,transparent),transparent 68%);
  animation:meshD 25s var(--ease) infinite alternate;
}
@keyframes meshA{to{transform:translate3d(16%,12%,0) scale(1.22)}}
@keyframes meshB{to{transform:translate3d(-18%,-10%,0) scale(1.16)}}
@keyframes meshC{to{transform:translate3d(12%,-16%,0) scale(1.26)}}
@keyframes meshD{to{transform:translate3d(-14%,18%,0) scale(1.18)}}

/* Retícula finísima sobre la malla, al estilo de una superficie Fluent */
.cta::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.6;
  background-image:
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(14,122,171,.06) 39px 40px),
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(14,122,171,.06) 39px 40px);
  -webkit-mask-image:radial-gradient(100% 80% at 50% 45%,#000 35%,transparent 88%);
  mask-image:radial-gradient(100% 80% at 50% 45%,#000 35%,transparent 88%);
}
/* Vela clara para que el texto siempre gane a la malla */
.cta::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--bg) 74%,transparent),
    color-mix(in srgb,var(--bg) 58%,transparent) 45%,
    color-mix(in srgb,var(--bg) 78%,transparent));
}

/* ---------- Superficies acrílicas ---------- */
.cta .form{
  background:color-mix(in srgb,var(--bg-elev) 78%,transparent);
  backdrop-filter:blur(22px) saturate(165%);-webkit-backdrop-filter:blur(22px) saturate(165%);
}
.cta .contact-item{
  background:color-mix(in srgb,var(--bg-elev) 72%,transparent);
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
}

/* ---------- Reveal: el borde se ilumina bajo el puntero ---------- */
.reveal-edge{position:relative}
.reveal-edge::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1.5px;opacity:0;transition:opacity .35s var(--ease);
  background:radial-gradient(180px circle at var(--rx,50%) var(--ry,50%),
    color-mix(in srgb,var(--accent-500) 92%,transparent),
    color-mix(in srgb,var(--brand-500) 38%,transparent) 42%,
    transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.reveal-edge.is-near::before{opacity:1}
/* Un halo interior muy leve acompaña al borde */
.reveal-edge::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(240px circle at var(--rx,50%) var(--ry,50%),
    color-mix(in srgb,var(--accent-500) 9%,transparent),transparent 70%);
}
.reveal-edge.is-near::after{opacity:1}
.reveal-edge > *{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){
  .cta__mesh span{animation:none}
  .reveal-edge::before,.reveal-edge::after{transition:none}
}