/*
 * ============================================================
 *  NEXTO AGENCY — Utility Classes
 *  Reusable helpers extracted from all 7 service pages
 *
 *  Categories:
 *  1. Glassmorphism
 *  2. Overlays & Backdrops
 *  3. Noise / Grain Texture
 *  4. Text Gradients
 *  5. Buttons & CTAs
 *  6. Interactive Cards (mouse-follow glow)
 *  7. Device Mockups
 *  8. Floating Notes
 *  9. Reveal Animations
 *  10. Custom Cursor
 *  11. Z-Index Helpers
 *  12. Clip-Paths & Masks
 *  13. State Classes
 *  14. Underline Effects
 *
 *  Each class marks which source file(s) use it.
 *  Values reference design-tokens.css custom properties.
 * ============================================================
 */


/* ────────────────────────────────────────────────────────────
   1. GLASSMORPHISM
   ──────────────────────────────────────────────────────────── */

/* Light glass panel — seo, landing-pages */
.glass-panel {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-float);
}

/* Light glass card — rediseno-web, ecommerce, diseno-web, soluciones-ia */
.premium-card,
.glass-card {
  background: rgba(255, 255, 255, 0.80);
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-lg);
}

/* Dark glass card — servicio */
.glass-card--dark {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

/* Strip glass — diseno-web, rediseno-web, ecommerce */
.signal-strip {
  padding: 22px 0;
  border-top: 1px solid rgba(214, 221, 237, 0.72);
  border-bottom: 1px solid rgba(214, 221, 237, 0.72);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.26));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* FAQ glass item — rediseno-web, ecommerce */
.faq-item {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


/* ────────────────────────────────────────────────────────────
   2. OVERLAYS & BACKDROPS
   ──────────────────────────────────────────────────────────── */

/* Closing section radial gradient overlay — ALL files */
.closing::before {
  content: "";
  position: absolute;
  inset: 80px 0 auto;
  height: calc(100% - 160px);
  border-radius: 58px;
  background:
    radial-gradient(circle at 16% 18%, rgba(141, 135, 255, 0.18), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(78, 71, 255, 0.18), transparent 30%),
    linear-gradient(180deg, #26243A 0%, #151421 100%);
  z-index: 0;
}

.closing-inner {
  position: relative;
  z-index: 1;
  width: var(--container);
  margin: 0 auto;
  padding: 0 42px;
}


/* ────────────────────────────────────────────────────────────
   3. NOISE / GRAIN TEXTURE
   ──────────────────────────────────────────────────────────── */

/* SVG noise overlay — servicio only */
.grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.03;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}


/* ────────────────────────────────────────────────────────────
   4. TEXT GRADIENTS
   ──────────────────────────────────────────────────────────── */

/* Purple gradient text — diseno-web, rediseno-web, ecommerce */
.section-title em,
.hero-title em,
.closing-title em {
  font-style: normal;
  background: linear-gradient(135deg, #5A55FF 0%, #9A95FF 52%, #C8C5FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Landing variant — seo, landing-pages */
.section-title em.landing-gradient {
  background: linear-gradient(135deg, #5A55FF 0%, #918BFF 52%, #C7C4FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* IA variant — soluciones-ia */
.section-title em.ia-gradient {
  background: linear-gradient(135deg, #342FFF 0%, #7B73FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Closing section (dark bg) lighter gradient */
.closing-title em {
  background: linear-gradient(135deg, #8D87FF 0%, #AAA6FF 48%, #D2CFFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Servicio dark-bg gradient */
.phil-headline em {
  font-style: normal;
  background: linear-gradient(135deg, #fff 30%, #818CF8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ────────────────────────────────────────────────────────────
   5. BUTTONS & CTAs
   ──────────────────────────────────────────────────────────── */

/* ── Apple Button System (all 7 pages) ── */

.nav-cta,
.apple-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition:
    transform 0.55s var(--ease),
    box-shadow 0.55s var(--ease),
    border-color 0.45s var(--ease),
    background 0.45s var(--ease);
}

/* Inner highlight */
.apple-button::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 60%);
  pointer-events: none;
}

/* Sweep shine on hover */
.apple-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 120%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-20deg);
  transition: left 0.85s var(--ease);
  pointer-events: none;
}

.apple-button:hover::after {
  left: 120%;
}

.apple-button span {
  position: relative;
  z-index: 1;
}

.apple-button--primary {
  color: var(--white);
  background: linear-gradient(135deg, #6660FF 0%, #5953F5 100%);
  border: 1px solid rgba(78, 71, 255, 0.44);
  box-shadow: 0 24px 50px rgba(78, 71, 255, 0.18);
}

.apple-button--secondary {
  color: var(--ink);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(241, 244, 255, 0.92));
  border: 1px solid rgba(214, 221, 237, 0.92);
  box-shadow: var(--shadow-soft);
}

.apple-button:hover {
  transform: translateY(-3px);
}

/* ── Hero CTA rotating border (diseno-web only) ── */

.hero-actions .apple-button::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from 0deg, #6C63FF, #A78BFA, #6C63FF, #818CF8, #6C63FF);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  animation: btn-rotate-border 3s linear infinite;
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.5s var(--ease);
}

/* ── Magnetic Premium Button (servicio only) ── */

.btn-premium {
  --mx: 0px;
  --my: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 32px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #5D56FF 0%, #4F46E5 100%);
  color: var(--white);
  border: 1px solid rgba(79, 70, 229, 0.35);
  border-radius: 100px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease),
    border-color 0.4s var(--ease),
    background 0.4s var(--ease);
  box-shadow:
    0 22px 46px rgba(79, 70, 229, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
  transform: translate3d(var(--mx), var(--my), 0);
  will-change: transform;
}


/* ────────────────────────────────────────────────────────────
   6. INTERACTIVE CARDS (mouse-follow glow)
   ──────────────────────────────────────────────────────────── */

/* All 7 pages */
.interactive-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.interactive-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: radial-gradient(
    320px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(141, 135, 255, 0.16),
    transparent 45%
  );
  opacity: 0;
  transition: opacity 0.55s var(--ease);
  pointer-events: none;
  z-index: 0;
}

.interactive-card:hover::after {
  opacity: 1;
}

.interactive-card > * {
  position: relative;
  z-index: 1;
}


/* ────────────────────────────────────────────────────────────
   7. DEVICE MOCKUPS
   ──────────────────────────────────────────────────────────── */

/* ── Mac Frame (browser mockup) — diseno-web, rediseno-web, landing-pages, seo, ecommerce ── */

.mac-frame {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(214, 221, 237, 0.92);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 247, 255, 0.92));
  box-shadow: var(--shadow-float);
}

.mac-frame--glass {
  background: rgba(255, 255, 255, 0.42);
  border-color: rgba(255, 255, 255, 0.68);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.mac-frame--dark {
  background: linear-gradient(180deg, #2B2940 0%, #171623 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-deep);
}

.mac-header {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(214, 221, 237, 0.78);
  background: rgba(255, 255, 255, 0.88);
}

.mac-frame--dark .mac-header {
  background: rgba(255, 255, 255, 0.04);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.mac-dot:nth-child(1) { background: #FF5F56; }
.mac-dot:nth-child(2) { background: #FFBD2E; }
.mac-dot:nth-child(3) { background: #27C93F; }

.mac-body { position: relative; overflow: hidden; }
.mac-body--16-10 { aspect-ratio: 16 / 10; }
.mac-body--16-9  { aspect-ratio: 16 / 9; }
.mac-body--4-3   { aspect-ratio: 4 / 3; }
.mac-body--trust-hero { aspect-ratio: 16 / 11.1; }

.mac-frame--dark .mac-body {
  background:
    radial-gradient(circle at 20% 20%, rgba(141, 135, 255, 0.22), transparent 34%),
    radial-gradient(circle at 80% 10%, rgba(78, 71, 255, 0.18), transparent 30%),
    linear-gradient(180deg, #252338 0%, #151421 100%);
}

.mac-frame:not(.mac-frame--dark) .mac-body {
  background:
    radial-gradient(circle at 50% -10%, rgba(141, 135, 255, 0.14), transparent 44%),
    linear-gradient(180deg, rgba(245, 248, 255, 0.98), rgba(238, 244, 255, 0.98));
}

/* ── Device Shell (dark device frames) — rediseno-web, ecommerce ── */

.device-shell {
  position: relative;
  padding: 10px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 24px 54px rgba(9, 10, 28, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.device-shell--desktop { min-height: 188px; }
.device-shell--tablet  { min-height: 152px; }
.device-shell--phone   { min-height: 238px; border-radius: 30px; }

.device-shell--ink {
  background: linear-gradient(180deg, rgba(40, 39, 72, 0.98), rgba(24, 24, 43, 0.98));
  border: 1px solid rgba(58, 56, 95, 0.92);
  box-shadow: 0 28px 64px rgba(10, 12, 31, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.device-shell__screen {
  position: relative;
  min-height: 100%;
  padding: 14px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(141, 135, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(44, 42, 76, 0.98), rgba(28, 27, 49, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: grid;
  gap: 10px;
  overflow: hidden;
}

.device-shell__screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.48;
  pointer-events: none;
}


/* ────────────────────────────────────────────────────────────
   8. FLOATING NOTES
   ──────────────────────────────────────────────────────────── */

/* ── Enhanced version (diseno-web) ── */

.floating-note {
  position: absolute;
  max-width: 250px;
  padding: 18px 20px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(248, 250, 255, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    0 32px 80px rgba(43, 45, 85, 0.16),
    0 8px 24px rgba(78, 71, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  z-index: 4;
  transform-style: preserve-3d;
  will-change: transform, box-shadow, border-color;
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  animation: float-gentle 6s ease-in-out infinite;
  overflow: hidden;
}

.floating-note::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(78, 71, 255, 0.12),
    rgba(141, 135, 255, 0.08),
    rgba(255, 255, 255, 0.15),
    rgba(141, 135, 255, 0.06));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.floating-note__glow {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(141, 135, 255, 0.25),
    transparent 45%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
  mask-image: radial-gradient(white, black);
  -webkit-mask-image: radial-gradient(white, black);
  mask-size: contain;
  -webkit-mask-size: contain;
}

.floating-note:hover {
  transform: translateY(-6px) scale(1.02) rotateX(2deg) rotateY(-2deg) !important;
  box-shadow:
    0 42px 100px rgba(43, 45, 85, 0.22),
    0 12px 32px rgba(78, 71, 255, 0.14),
    0 0 0 1px rgba(141, 135, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  border-color: rgba(110, 101, 255, 0.48);
  animation-play-state: paused;
}

.floating-note:hover::before { opacity: 1; }
.floating-note:hover .floating-note__glow { opacity: 1; }

.floating-note strong {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4B4777;
  position: relative;
}

.floating-note strong::before {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
  box-shadow: 0 0 0 4px rgba(78, 71, 255, 0.12), 0 0 16px rgba(78, 71, 255, 0.35);
  animation: pulse-glow 3s ease-in-out infinite;
}

.floating-note span {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.floating-note-shine {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.05) 45%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0.08) 100%
  );
  pointer-events: none;
  z-index: 2;
  opacity: 0.6;
}

/* ── Simpler version (rediseno-web, ecommerce, seo, soluciones-ia) ── */

.floating-note--simple {
  position: absolute;
  max-width: 250px;
  padding: 16px 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.70);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 28px 70px rgba(43, 45, 85, 0.14);
  z-index: 4;
}

/* ── Hero variant (servicio) ── */

.hero-floating-note {
  position: absolute;
  max-width: 224px;
  padding: 15px 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.76);
  box-shadow: 0 24px 60px rgba(17, 24, 39, 0.10);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 3;
  animation: heroNoteFloat 7s ease-in-out infinite;
}


/* ────────────────────────────────────────────────────────────
   9. REVEAL ANIMATIONS
   ──────────────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(34px) scale(0.985);
  filter: blur(8px);
  transition: opacity 1.05s var(--ease), transform 1.05s var(--ease), filter 1.05s var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.delay-1 { transition-delay: 0.12s; }
.delay-2 { transition-delay: 0.24s; }
.delay-3 { transition-delay: 0.36s; }

/* Servicio variant — uses larger offset and longer duration */
.reveal--servicio {
  transform: translateY(40px) scale(0.98);
  transition: 1.2s var(--ease);
}


/* ────────────────────────────────────────────────────────────
   10. CUSTOM CURSOR (global desktop layer)
   ──────────────────────────────────────────────────────────── */

@media (pointer: fine) {
  body.custom-cursor-active { cursor: none; }
  body.custom-cursor-active a,
  body.custom-cursor-active button,
  body.custom-cursor-active input,
  body.custom-cursor-active textarea,
  body.custom-cursor-active select,
  body.custom-cursor-active [data-cursor],
  body.custom-cursor-active .interactive-card,
  body.custom-cursor-active .mac-frame,
  body.custom-cursor-active .glass-card,
  body.custom-cursor-active .premium-card,
  body.custom-cursor-active .btn-premium,
  body.custom-cursor-active .hero-chip,
  body.custom-cursor-active .nav-cta,
  body.custom-cursor-active .magnetic-item,
  body.custom-cursor-active .process-dot-wrapper {
    cursor: none !important;
  }

  .custom-cursor-group {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    mix-blend-mode: normal;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
  }

  .cursor-follower {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, rgba(87, 80, 255, 0.15), rgba(141, 135, 255, 0.05));
    border: 1px solid rgba(87, 80, 255, 0.25);
    border-radius: 14px;
    pointer-events: none !important;
    opacity: 0;
    scale: 0.8;
    transition: opacity 1.2s ease, scale 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
    backface-visibility: hidden;
  }

  body.mouse-moving .cursor-follower {
    opacity: 1;
    scale: 1;
  }

  .cursor-arrow {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 4L26 12L15 15L12 26L8 4Z' fill='%231C1A2A' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transform-origin: top left;
    filter: drop-shadow(0 12px 24px rgba(87, 80, 255, 0.3));
    transition:
      opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
      filter 0.3s ease;
    backface-visibility: hidden;
  }

  .cursor-badge {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none !important;
    background: linear-gradient(135deg, rgba(28, 26, 42, 0.96) 0%, rgba(42, 40, 64, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.25),
      inset 0 -2px 10px rgba(87, 80, 255, 0.15),
      0 24px 40px rgba(28, 26, 42, 0.4),
      0 0 30px rgba(141, 135, 255, 0.2);
    color: #FFFFFF;
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 12px 24px;
    border-radius: 999px;
    white-space: nowrap;
    opacity: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    transform: scale(0.3) translate(-40px, -40px);
    transform-origin: center left;
    transition:
      opacity 0.4s cubic-bezier(0.2, 1, 0.3, 1),
      transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    backface-visibility: hidden;
  }

  body.cur-hover .cursor-follower { opacity: 0; }
  body.cur-hover .cursor-arrow     { opacity: 0; }
  body.cur-hover .cursor-badge     { opacity: 1; transform: scale(1) translate(15px, 15px); }
}


/* ────────────────────────────────────────────────────────────
   11. Z-INDEX HELPERS
   ──────────────────────────────────────────────────────────── */

/*
 * Documented z-index layers (no CSS vars exist; applied inline).
 * Reference this section when migrating to WP.
 *
 *   z-index: -1       background pseudo-elements
 *   z-index:  0       section backgrounds, ::before
 *   z-index:  1       inner content (closing-inner, nav links)
 *   z-index:  4       .floating-note
 *   z-index:  5       .hero-actions, .closing-actions
 *   z-index:  10      hero content
 *   z-index:  1000    fixed nav bar
 *   z-index:  9999    .grain noise overlay (servicio)
 *   z-index:  99999   .custom-cursor-group
 */


/* ────────────────────────────────────────────────────────────
   12. CLIP-PATHS & MASKS
   ──────────────────────────────────────────────────────────── */

/* Conic-gradient mask for rotating border (diseno-web hero CTA) */
/*
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
*/

/* Radial mask for glow elements */
/*
  mask-image: radial-gradient(white, black);
  -webkit-mask-image: radial-gradient(white, black);
  mask-size: contain;
  -webkit-mask-size: contain;
*/

/* Grid overlay for device screens */
/*
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 28px 28px;
*/


/* ────────────────────────────────────────────────────────────
   13. STATE CLASSES
   ──────────────────────────────────────────────────────────── */

/*
 * JS toggle classes used across pages:
 *
 * .visible           — element revealed (scroll animation complete)
 * .cur-hover         — cursor over interactive element (custom cursor)
 * .custom-cursor-active — custom cursor enabled
 * .mouse-moving      — mouse movement detected (show cursor follower)
 * .active            — active navigation item, active FAQ, active process step
 * .open              — open FAQ item, open mobile menu
 * .scrolled          — nav scrolled state (background change)
 * .scrolling          — marquee scroll container
 */


/* ────────────────────────────────────────────────────────────
   14. CUSTOM UNDERLINE EFFECTS
   ──────────────────────────────────────────────────────────── */

/* Underline accent animation — used in hero subtext and nav links */
/*
  Common pattern:
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.4s var(--ease);

  :hover { background-size: 100% 2px; }
*/


/* ────────────────────────────────────────────────────────────
   15. 3D TRANSFORM UTILITIES
   ──────────────────────────────────────────────────────────── */

/* Applied to cards and mockups (diseno-web, rediseno-web) */
.mac-frame,
.premium-card,
.glass-card,
.interactive-card {
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
  backface-visibility: hidden;
}