/* ══════════════════════════════════════════════════════════════
   ContactSphere AI · capa de movimiento y pulido (sitetest3)
   Se carga DESPUÉS de csai.css. El contenido es visible sin JS:
   motion.js solo añade .js-motion y anima encima.
   ══════════════════════════════════════════════════════════════ */

:root{
  --ease-out: cubic-bezier(.16,1,.3,1);
  --z-progress: 210;
}
html{ interpolate-size:allow-keywords; }
h1,h2,h3,h4{ text-wrap:balance; }
p{ text-wrap:pretty; }
::selection{ background:rgba(10,116,240,.22); }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:6px; }
nav :focus-visible, .hero :focus-visible, .cta :focus-visible, footer :focus-visible{ outline-color:var(--cyan); }

/* ── Progreso de lectura ────────────────────────────────── */
.progress-bar{ position:fixed; top:0; left:0; right:0; height:3px; z-index:var(--z-progress); pointer-events:none; }
.progress-bar i{
  display:block; height:100%; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--cyan),#7a5cff 55%,var(--pink));
}

/* ── Nav: estado al hacer scroll + subrayado que se dibuja ── */
nav{ transition:background .35s ease, box-shadow .35s ease, border-color .35s ease; }
nav.is-scrolled{ background:rgba(4,12,30,.95); box-shadow:0 10px 30px rgba(0,0,0,.35); border-bottom-color:rgba(255,255,255,.12); }
.nav-links a{ position:relative; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--pink)); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .35s var(--ease-out);
}
.nav-links a:hover::after{ transform:scaleX(1); }

/* ── Botones: se hunden al pulsar y un brillo cruza al pasar ── */
.btn{ transition:transform .25s var(--ease-out), box-shadow .25s ease, background .2s ease, border-color .2s ease; }
.btn:active{ transform:scale(.97); }
.btn-primary{ position:relative; overflow:hidden; isolation:isolate; box-shadow:0 8px 20px rgba(0,0,0,.30); }
.btn-primary:hover{ box-shadow:0 12px 26px rgba(0,0,0,.36); }
.btn-primary::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%);
  transform:translateX(-130%); transition:transform .8s var(--ease-out);
}
.btn-primary:hover::after{ transform:translateX(130%); }

/* ── Hover de tarjetas y chips: 2-3 px, nada de inclinaciones ── */
.trust-chip{ transition:transform .3s var(--ease-out), box-shadow .3s ease, border-color .3s ease; }
.trust-chip:hover{ transform:translateY(-2px); border-color:#cfdcec; }
.bcard:hover{ transform:translateY(-3px); }
.plan{ transition:transform .3s var(--ease-out), box-shadow .3s ease, border-color .3s ease; }
.plan:hover{ transform:translateY(-3px); }

/* ── Hero: la captura asienta con el scroll + foco de luz del cursor ── */
.js-motion .hero .shot{ will-change:transform; }
.hero-spot{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .5s ease;
  background:radial-gradient(560px circle at var(--mx,50%) var(--my,30%), rgba(0,200,240,.16), rgba(122,92,255,.07) 42%, transparent 68%);
}
.hero:hover .hero-spot{ opacity:1; }
@media (hover:none){ .hero-spot{ display:none; } }

/* ── Ventana Mac y móvil: el scroll/ratón mandan, no el CSS ── */
.js-motion .mac-win{ transition:box-shadow .8s ease; will-change:transform; }
.js-motion .mac-stage:hover .mac-win{ transform:none; }
.js-motion .iphone{ transition:none; will-change:transform; }
.js-motion .phone-stage:hover .iphone{ transform:none; }
.js-motion .sofa-img{ will-change:transform; }

/* ── Móvil: el movimiento lo lleva GSAP (solo mientras se ve) ── */
.js-motion .phone-float{ animation:none; will-change:transform; }
.js-motion .ip-notif{ animation:none; transform:none; }
.ip-fab{ box-shadow:0 10px 22px rgba(0,0,0,.45); }
.ip-fab::after{ content:""; position:absolute; inset:0; border-radius:inherit; border:2px solid rgba(122,92,255,.7); opacity:0; pointer-events:none; }
.ip-fab.is-ping::after{ animation:fabPing 1.4s var(--ease-out) 1; }
@keyframes fabPing{ from{ transform:scale(1); opacity:.9; } to{ transform:scale(1.9); opacity:0; } }

/* ── Cómo funciona: línea que se dibuja y pasos que se encienden ── */
.steps{ position:relative; }
.steps-line{ display:none; }
@media (min-width:1001px){
  .steps-line{ display:block; position:absolute; left:0; right:0; top:19px; height:2px; z-index:0; background:var(--line); border-radius:2px; overflow:hidden; }
  .steps-line i{ display:block; height:100%; transform-origin:0 50%; transform:scaleX(1); background:linear-gradient(90deg,var(--cyan),#7a5cff 55%,var(--pink)); }
  .js-motion .steps-line i{ transform:scaleX(0); }
  .step{ position:relative; z-index:1; }
  .step-n{ position:relative; display:inline-block; background:var(--bg-soft); padding-right:14px; transition:color .4s ease, transform .5s var(--ease-out); }
  .js-motion .step:not(.is-on) .step-n{ color:#9aa8bd; -webkit-text-fill-color:currentColor; background-clip:border-box; }
  .step.is-on .step-n{ transform:translateY(-2px); }
}

/* ── Precios: marco de luz giratorio en el plan destacado ── */
@property --ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.plan.featured{
  border:1.5px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    conic-gradient(from var(--ang), var(--cyan), var(--brand) 25%, var(--pink) 55%, var(--brand) 80%, var(--cyan)) border-box;
  box-shadow:0 2px 6px rgba(10,21,38,.06);
  animation:spinBorder 7s linear infinite;
}
.plan.featured:hover{ box-shadow:0 14px 28px -14px rgba(10,21,38,.28); }
@keyframes spinBorder{ to{ --ang:360deg; } }

/* ── FAQ: apertura suave ────────────────────────────────── */
.faq details::details-content{ block-size:0; overflow:clip; transition:block-size .4s var(--ease-out), content-visibility .4s allow-discrete; }
.faq details[open]::details-content{ block-size:auto; }

/* ══ Pulido: contraste y tamaños que el detector marcó ══════ */
:root{ --muted:#55657a; }                                               /* antes #64748b: rozaba 4,3:1 sobre fondos suaves */
.split-list h3{ font-size:16px; margin-bottom:5px; }                    /* eran h4: se sube un nivel sin cambiar el aspecto */
.app-feat h3{ font-size:14.5px; margin-bottom:3px; }
.bento-head .h-sec .soft{ color:#64748b; }                              /* antes #a3adbd, 2,3:1 */
.paid{ color:#15803d; border-color:#15803d; }                            /* antes #16a34a, 3,3:1 */
.new-pill b{ background:linear-gradient(100deg,#0369a1,#5b45e0 55%,#a21caf); } /* blanco sobre cian era 2,0:1 */
.plan.featured .save-chip{ background:linear-gradient(100deg,#15803d,#0f766e); }
.specs span{ color:#9fb0cb; }                                           /* antes #7f90ad sobre navy */
.eyebrow, .bc-tag, .billing-gift, .save-chip, .new-pill b{ font-size:12px; }
.ip-chips span{ font-size:11px; }
.cookie-banner{ box-shadow:0 24px 60px rgba(0,0,0,.6); }

/* ── Sin movimiento ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .progress-bar{ display:none; }
  .plan.featured{ animation:none; }
  .btn-primary::after, .nav-links a::after{ transition:none; }
}