/* ============================================================
   FX21 — Efectos por sección (port vanilla de 21st.dev)
   Un efecto distinto por sección · paleta navy #163760 / oro #A07E2F
   Todo gateado: no-fx + prefers-reduced-motion + pointer:fine
   ============================================================ */

/* ── 1. PARTNERS — logos gris→color + lift ── */
.logo-img { filter: grayscale(1) opacity(.72); transition: filter .35s ease, transform .35s ease; }
.logo-img:hover { filter: none; transform: translateY(-3px) scale(1.06); }

/* ── 2. NOSOTROS — scroll word reveal (palabras se encienden al scrollear) ── */
.big-stmt .wr { color: rgba(22, 55, 96, 0.16); transition: color .25s linear; }
.big-stmt .wr.on { color: inherit; }
.big-stmt { color: var(--text); }

/* ── 3. SERVICIOS — spotlight oro que sigue al cursor ── */
@media (hover: hover) and (pointer: fine) {
  .svc { position: relative; }
  .svc::after {
    content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
    transition: opacity .4s ease;
    background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 50%),
      rgba(160, 126, 47, 0.13), rgba(22, 55, 96, 0.05) 45%, transparent 65%);
  }
  .svc:hover::after { opacity: 1; }
}

/* ── 4. BENEFICIOS — portrait-wall scrub: scale 0→1→0 con el scroll ── */
.benefit { transform: scale(var(--bs, 1)); }
.benefit:nth-child(n+4) { border-top: 1px solid var(--line); }
@media (max-width: 820px) { .benefit:nth-child(n+4) { border-top: none; } }

/* ── 4b. BENEFICIOS — tilt 3D + glare físico ── */
@media (hover: hover) and (pointer: fine) {
  .benefits { perspective: 1100px; }
  .benefit { transform-style: preserve-3d; will-change: transform; transition: background .3s, box-shadow .35s, transform .15s ease-out; }
  .benefit:hover { box-shadow: 0 26px 52px -24px rgba(22, 55, 96, 0.32); z-index: 2; }
  .benefit .fx-glare {
    position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.55), transparent 60%);
  }
  .benefit:hover .fx-glare { opacity: 1; }
}

/* ── 5. TRUST — sparkles oro titilando sobre las cifras ── */
.trust-cell .stat { position: relative; }
.fx-spark {
  position: absolute; pointer-events: none; opacity: 0; z-index: 1;
  animation: fxSpark var(--d, 1.8s) ease-in-out var(--dl, 0s) infinite;
}
@keyframes fxSpark {
  0%, 100% { opacity: 0; transform: scale(0) rotate(40deg); }
  50% { opacity: 1; transform: scale(1) rotate(130deg); }
}

/* ── 6. PRECIOS — border beam oro recorriendo la card Recomendado ── */
.fx-beam {
  position: absolute; inset: 0; border-radius: var(--radius-lg); pointer-events: none;
  border: 2px solid transparent;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
.fx-beam::after {
  content: ""; position: absolute; aspect-ratio: 1; width: 150px;
  offset-path: rect(0 auto auto 0 round 8px);
  background: linear-gradient(to left, var(--gold-2), #F4E7BF 18%, rgba(189, 154, 69, 0) 70%);
  animation: fxBeam 8s linear infinite;
}
@keyframes fxBeam { to { offset-distance: 100%; } }

/* botones primarios: barrido de luz al hover (light-sweep) */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: -50%; bottom: -50%; left: 0; width: 38px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  filter: blur(6px); pointer-events: none;
  transform: skewX(-18deg) translateX(-90px);
}
.btn-primary:hover::after { transition: transform .75s ease; transform: skewX(-18deg) translateX(480px); }
/* CTA grande de WhatsApp: brillo automático en loop */
.cta-banner .btn-primary.btn-lg::after { animation: fxSweep 4.2s ease 1.4s infinite; }
@keyframes fxSweep {
  0% { transform: skewX(-18deg) translateX(-110px); }
  26%, 100% { transform: skewX(-18deg) translateX(540px); }
}

/* ── 7. PROCESO — la línea superior se dibuja en oro, en cascada ── */
.step::before {
  content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2) 70%, transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}
.steps.fx-in .step:nth-child(1)::before { transform: scaleX(1); transition-delay: 0s; }
.steps.fx-in .step:nth-child(2)::before { transform: scaleX(1); transition-delay: .28s; }
.steps.fx-in .step:nth-child(3)::before { transform: scaleX(1); transition-delay: .56s; }
.steps.fx-in .step:nth-child(4)::before { transform: scaleX(1); transition-delay: .84s; }
.step .sn { display: inline-block; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.steps.fx-in .step:nth-child(1) .sn { opacity: 1; transform: none; transition-delay: .15s; }
.steps.fx-in .step:nth-child(2) .sn { opacity: 1; transform: none; transition-delay: .43s; }
.steps.fx-in .step:nth-child(3) .sn { opacity: 1; transform: none; transition-delay: .71s; }
.steps.fx-in .step:nth-child(4) .sn { opacity: 1; transform: none; transition-delay: .99s; }

/* ── 8. VIDEO — aurora respirando alrededor del frame ── */
@media (prefers-reduced-motion: no-preference) {
  .video-frame { animation: fxVGlow 6.5s ease-in-out infinite; }
}
@keyframes fxVGlow {
  0%, 100% { box-shadow: 0 36px 90px -38px rgba(13, 33, 56, 0.4), 0 0 0 1px rgba(160, 126, 47, 0.15) inset, 0 0 55px -8px rgba(160, 126, 47, 0.22), 0 0 110px -18px rgba(31, 75, 128, 0.18); }
  50% { box-shadow: 0 36px 90px -38px rgba(13, 33, 56, 0.4), 0 0 0 1px rgba(160, 126, 47, 0.3) inset, 0 0 95px -4px rgba(160, 126, 47, 0.5), 0 0 160px -10px rgba(31, 75, 128, 0.42); }
}

/* ── 9. TESTIMONIOS — aurora dorada derivando tras la cita ── */
.testi-stage::before {
  content: ""; position: absolute; width: 58%; height: 72%; left: 6%; top: 8%;
  border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(160, 126, 47, 0.28), rgba(22, 55, 96, 0.16) 55%, transparent 75%);
  filter: blur(46px);
  animation: fxDrift 14s ease-in-out infinite alternate;
}
@keyframes fxDrift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(40%, 16%) scale(1.2); }
}

/* ── 10. FAQ — subrayado oro que se dibuja + barrido en preguntas ── */
.faq-side h2 { position: relative; }
.faq-side h2::after {
  content: ""; position: absolute; left: 0; bottom: -12px; height: 3px; width: 56%;
  background: linear-gradient(90deg, var(--gold), var(--gold-2) 60%, transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s .25s cubic-bezier(.2, .8, .2, 1);
}
.faq-side.fx-in h2::after { transform: scaleX(1); }
.faq-q { position: relative; overflow: hidden; }
.faq-q::after {
  content: ""; position: absolute; top: -50%; bottom: -50%; left: 0; width: 60px;
  background: linear-gradient(90deg, transparent, rgba(160, 126, 47, 0.16), transparent);
  transform: skewX(-16deg) translateX(-140px); pointer-events: none;
}
.faq-q:hover::after { transition: transform .85s ease; transform: skewX(-16deg) translateX(min(82vw, 980px)); }

/* ── 11. BLOG — destello de cristal cruzando la card activa ── */
.stack-card::after {
  content: ""; position: absolute; top: -60%; bottom: -60%; left: 0; width: 52px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: skewX(-16deg) translateX(-160px); pointer-events: none;
}
.stack-card.is-active:hover::after { transition: transform .95s ease; transform: skewX(-16deg) translateX(640px); }

/* ── 12. CTA BANNER — glow oro ascendente + botones magnéticos (JS) ── */
.cta-banner { position: relative; overflow: hidden; }
.cta-banner::before {
  content: ""; position: absolute; left: 50%; bottom: -170px; width: 72%; height: 400px;
  transform: translateX(-50%) scale(2.1); pointer-events: none; opacity: .65;
  background: radial-gradient(ellipse at center, rgba(160, 126, 47, 0.2) 8%, rgba(22, 55, 96, 0.06) 40%, transparent 62%);
  transition: transform .7s ease, opacity .7s ease;
}
.cta-banner:hover::before { transform: translateX(-50%) translateY(-46px) scale(2.45); opacity: 1; }
.fx-mag { will-change: transform; }

/* ── Gates globales ── */
@media (prefers-reduced-motion: reduce) {
  .fx-spark, .fx-beam::after, .cta-banner .btn-primary.btn-lg::after, .testi-stage::before { animation: none !important; }
  .big-stmt .wr { color: inherit !important; }
  .step::before { transform: scaleX(1) !important; }
  .step .sn { opacity: 1 !important; transform: none !important; }
  .faq-side h2::after { transform: scaleX(1) !important; }
}
.no-fx .fx-spark, .no-fx .fx-beam, .no-fx .testi-stage::before { display: none !important; }
.no-fx .video-frame, .no-fx .cta-banner .btn-primary.btn-lg::after { animation: none !important; }
.no-fx .big-stmt .wr { color: inherit !important; }
.no-fx .step::before { transform: scaleX(1); }
.no-fx .step .sn { opacity: 1; transform: none; }