/* ============================================================
   PREMIUM LAYER — refinamientos editoriales (grain sutil,
   reveals suaves, sheen en cards, focus en tipografía)
   ============================================================ */

/* Grain sutil global (muy tenue, sólo textura editorial) */
.grain-editorial {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  opacity: 0.028;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.62 0 0 0 0 0.83 0 0 0 0 0.87 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Scroll progress bar turquesa */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 9999;
  pointer-events: none;
  background: rgba(127, 193, 204, 0.1);
}

.scroll-progress__bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, var(--mint-300) 40%, var(--mint-200) 60%, transparent 100%);
  box-shadow: 0 0 14px var(--mint-300);
  transition: width 0.1s linear;
}

/* Hero — refinamientos tipográficos */
.hero__title em {
  text-shadow: 0 0 30px rgba(127, 193, 204, 0.28);
}

/* Service card sheen sweep */
.svc::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(110deg, transparent 30%, rgba(157, 212, 221, 0.12) 50%, transparent 70%);
  transition: left 0.9s var(--ease-out);
  z-index: 3;
  pointer-events: none;
}

.svc:hover::before { left: 160%; }

.svc--hero::after {
  content: '⟶';
  position: absolute;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: 3;
  font-size: 1.5rem;
  color: var(--mint-300);
  opacity: 0.7;
  transition: transform var(--dur-normal);
}

.svc--hero:hover::after {
  transform: translateX(6px);
  opacity: 1;
}

/* Pulsación suave en CTA primario */
.btn--wa.is-primary {
  animation: wa-pulse 3s ease-in-out infinite;
}

@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 12px 30px rgba(37, 211, 102, 0.25), 0 0 0 0 rgba(37, 211, 102, 0); }
  50%      { box-shadow: 0 12px 30px rgba(37, 211, 102, 0.3), 0 0 0 12px rgba(37, 211, 102, 0); }
}

/* Emerald seal — glow animado */
.emerald-band__seal {
  position: relative;
}

.emerald-band__seal::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: calc(var(--radius-lg) + 4px);
  background: linear-gradient(135deg, var(--mint-300), transparent 50%, var(--mint-500));
  z-index: -1;
  opacity: 0.55;
  filter: blur(6px);
  animation: seal-glow 4s ease-in-out infinite alternate;
}

@keyframes seal-glow {
  0%   { opacity: 0.4; transform: scale(1); }
  100% { opacity: 0.75; transform: scale(1.02); }
}

/* Timeline nums — borde animado al hover */
.proc__step:hover .proc__step-num {
  box-shadow: 0 0 0 4px rgba(127, 193, 204, 0.2), 0 0 30px rgba(127, 193, 204, 0.4);
}

/* Calculadora result pulse sutil */
.calc__result {
  position: relative;
  overflow: hidden;
}

.calc__result::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 150%;
  height: 200%;
  background: radial-gradient(circle, rgba(127, 193, 204, 0.12) 0%, transparent 50%);
  animation: calc-orbit 12s linear infinite;
  pointer-events: none;
}

@keyframes calc-orbit {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-20%, 20%) rotate(360deg); }
}

/* Slider antes/después — badge pulse */
.ba-slider__knob {
  animation: knob-breath 2.5s ease-in-out infinite;
}

@keyframes knob-breath {
  0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 0 6px rgba(255,255,255,0.12); }
  50%      { box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 0 10px rgba(255,255,255,0.05); }
}

.ba-slider::after {
  content: '⇄ arrastra';
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  background: rgba(8, 32, 44, 0.85);
  color: var(--mint-200);
  font-family: var(--font-heading);
  font-size: 0.65rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(127, 193, 204, 0.35);
  opacity: 0.8;
  pointer-events: none;
  z-index: 3;
  transition: opacity var(--dur-normal);
}

.ba-slider:hover::after,
.ba-slider.is-dragging::after { opacity: 0; }

/* Gallery items — frame sutil al hover */
.gal__item {
  border: 1px solid transparent;
  transition: border-color var(--dur-normal), transform var(--dur-normal);
}

.gal__item:hover {
  border-color: rgba(127, 193, 204, 0.4);
  transform: translateY(-3px);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .grain-editorial,
  .btn--wa.is-primary,
  .emerald-band__seal::before,
  .calc__result::before,
  .ba-slider__knob {
    animation: none !important;
  }
}