/* ELEJEM · Etapa 7A · capa visual "futuro"
   Solo añade estilo encima de styles.css / improvements.css / ux-5i.css.
   Sin dependencias externas. Todo el movimiento se desactiva con prefers-reduced-motion. */

@view-transition { navigation: auto; }

:root {
  --fx-gold: #f4b223;
  --fx-gold-soft: rgba(244, 178, 35, .16);
  --fx-gold-line: rgba(244, 178, 35, .42);
  --fx-glass: rgba(18, 21, 27, .58);
  --fx-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Barra de progreso con halo ---------- */
.scroll-progress span { background: linear-gradient(90deg, #b9831a, var(--fx-gold) 60%, #ffe3a1); box-shadow: 0 0 12px rgba(244,178,35,.55); }

/* ---------- Hero: malla técnica + trazas de corriente ---------- */
.hero, .service-hero { isolation: isolate; }
.fx-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(244,178,35,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,178,35,.07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 72% 42%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse 70% 60% at 72% 42%, #000 0%, transparent 72%);
}
.fx-circuit { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.fx-circuit path { fill: none; stroke: var(--fx-gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .7; vector-effect: non-scaling-stroke; }
.fx-circuit .fx-pulse { stroke-width: 2.6; opacity: 0; stroke-dasharray: 60 940; filter: drop-shadow(0 0 4px rgba(244,178,35,.9)); }
.fx-circuit circle { fill: var(--fx-gold); opacity: .8; }
.hero .hero-content, .service-hero .service-hero-content, .hero-ui, .hero-ticker { position: relative; z-index: 3; }

/* Destello del cursor (solo escritorio con ratón) */
.fx-cursor {
  position: fixed; left: 0; top: 0; z-index: 1; width: 440px; height: 440px; margin: -220px 0 0 -220px;
  border-radius: 50%; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(244,178,35,.13) 0%, rgba(244,178,35,.05) 35%, transparent 70%);
  transition: opacity .4s; will-change: transform;
}
.fx-cursor.is-on { opacity: 1; }

/* ---------- Titulares ---------- */
.hero h1 em, .hero h2 em, .service-hero h1 em {
  background: linear-gradient(100deg, #f4b223 0%, #ffd36b 40%, #f4b223 60%, #c98f14 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-kicker { position: relative; }

/* Línea de corriente bajo los encabezados de sección */
/* 9F: .process-intro NO se toca: en escritorio es sticky (ya posiciona) y en ≤1024px debe ser static.
   Forzar relative aquí heredaba top:140px del sticky y desplazaba el párrafo sobre el primer paso en móvil. */
.section-heading, .brands-heading, .service-intro-copy { position: relative; }
.fx-wire { display: block; height: 1px; margin-top: 1.6rem; max-width: 220px; background: linear-gradient(90deg, var(--fx-gold), transparent); transform-origin: left; }

/* ---------- Tarjetas: borde dorado vivo + brillo que sigue al puntero ---------- */
.service-card, .solution-card, .related-card, .trust-item, .fact, .faq-item, .sector-card {
  --mx: 50%; --my: 50%;
}
.service-card::after, .solution-card::after, .related-card::after, .fact::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(244,178,35,.14), transparent 60%);
  opacity: 0; transition: opacity .35s;
}
.service-card:hover::after, .solution-card:hover::after, .related-card:hover::after, .fact:hover::after { opacity: 1; }
.service-card > *, .solution-card > *, .related-card > * { position: relative; z-index: 1; }
.service-card > a:not(.button) { position: absolute; }
.service-card > span { position: absolute; }
.fact, .related-card { position: relative; }
.service-card, .solution-card, .related-card { box-shadow: inset 0 0 0 0 transparent; transition: box-shadow .35s, background .35s, transform .35s var(--fx-ease), color .35s; }
.service-card:hover, .solution-card:hover, .related-card:hover { box-shadow: inset 0 0 0 1px var(--fx-gold-line), 0 28px 50px rgba(17,19,24,.1); }
.service-icon { transition: transform .4s var(--fx-ease), box-shadow .4s; }
.service-card:hover .service-icon { box-shadow: 0 0 0 6px rgba(244,178,35,.12); }

/* Tarjeta oscura con vidrio */
.service-dark, .technical-card {
  background: linear-gradient(160deg, rgba(30,34,42,.92), rgba(12,14,18,.96)) !important;
  border: 1px solid rgba(244,178,35,.28);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* Datos (números reales de la web) */
.fact strong { font-variant-numeric: tabular-nums; }
.fact strong::after { content: ""; display: block; width: 28px; height: 2px; margin-top: .9rem; background: var(--fx-gold); box-shadow: 0 0 10px rgba(244,178,35,.6); }

/* Sectores: viñeta dorada y escaneo de luz al pasar */
.sector-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,211,107,.18) 50%, transparent 65%);
  background-size: 250% 100%; background-position: 120% 0; transition: background-position 1s var(--fx-ease);
}
.sector-card:hover::before { background-position: -20% 0; }

/* ---------- Secciones oscuras con textura de circuito ---------- */
.process, .contact {
  background-image:
    linear-gradient(90deg, rgba(12,14,18,.96) 0%, rgba(12,14,18,.78) 55%, rgba(12,14,18,.55) 100%),
    image-set(url("assets/fx7-circuito-oro-1600.webp") 1x);
  background-image:
    linear-gradient(90deg, rgba(12,14,18,.97) 0%, rgba(12,14,18,.9) 50%, rgba(12,14,18,.74) 100%),
    url("assets/fx7-circuito-oro-1600.webp");
  background-size: cover; background-position: right center; background-repeat: no-repeat;
}
.contact { background-image: linear-gradient(90deg, rgba(12,14,18,.97) 0%, rgba(12,14,18,.88) 55%, rgba(12,14,18,.7) 100%), url("assets/fx7-circuito-oro-b-1600.webp"); }
.site-footer { background-image: linear-gradient(180deg, #07090b 0%, rgba(7,9,11,.9) 60%, rgba(7,9,11,.75) 100%), url("assets/fx7-trazas-corriente-1600.webp"); background-size: cover; background-position: right bottom; background-repeat: no-repeat; }
@media (max-width: 720px) {
  .process { background-image: linear-gradient(180deg, rgba(12,14,18,.95), rgba(12,14,18,.82)), url("assets/fx7-circuito-oro-800.webp"); }
  .contact { background-image: linear-gradient(180deg, rgba(12,14,18,.96), rgba(12,14,18,.84)), url("assets/fx7-circuito-oro-b-800.webp"); }
  .site-footer { background-image: linear-gradient(180deg, #07090b 0%, rgba(7,9,11,.86) 100%), url("assets/fx7-trazas-corriente-800.webp"); }
}

/* ---------- Páginas legales y de vídeo: cabecera técnica ---------- */
.legal-hero, .watch-heading { position: relative; }
.legal-hero::after, .watch-heading::after { content: ""; display: block; width: 120px; height: 2px; margin-top: 1.6rem; background: linear-gradient(90deg, var(--fx-gold), transparent); }
.work-video-stage { box-shadow: 0 0 0 1px rgba(244,178,35,.25), 0 40px 80px -30px rgba(0,0,0,.6); }

/* Botón principal con filo de luz */
.button-primary { position: relative; overflow: hidden; }
.button-primary::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  transform: translateX(-120%);
}
.button-primary:hover::before { transform: translateX(120%); transition: transform .8s var(--fx-ease); }

/* Foco visible coherente */
:where(a, button, summary):focus-visible { outline: 2px solid var(--fx-gold); outline-offset: 3px; }

/* =================== MOVIMIENTO (solo si el usuario lo permite) =================== */
@media (prefers-reduced-motion: no-preference) {
  .fx-grid { animation: fxGridDrift 24s linear infinite; }
  @keyframes fxGridDrift { to { background-position: 64px 64px, 64px 64px; } }

  .fx-circuit .fx-base { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: fxDraw 2.6s var(--fx-ease) .3s forwards; }
  .fx-circuit .fx-pulse { animation: fxPulse 4.8s linear 2.4s infinite; }
  .fx-circuit .fx-pulse:nth-of-type(2n) { animation-delay: 3.6s; animation-duration: 6s; }
  .fx-circuit circle { animation: fxNode 3.2s ease-in-out infinite; }
  .fx-circuit circle:nth-of-type(2n) { animation-delay: 1.4s; }
  @keyframes fxDraw { to { stroke-dashoffset: 0; } }
  @keyframes fxPulse { 0% { stroke-dashoffset: 1000; opacity: 0; } 8% { opacity: 1; } 70% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
  @keyframes fxNode { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

  .hero h1 em, .hero h2 em, .service-hero h1 em { animation: fxSheen 7s ease-in-out infinite; }
  @keyframes fxSheen { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

  /* Revelado del titular por máscara (no se toca el texto) */
  .fx-in-ready :is(.section-heading h2, .brands-heading h2, .process-intro h2, .about-copy h2, .service-intro-copy h2) {
    clip-path: inset(0 0 100% 0); transform: translateY(18px);
    transition: clip-path 1.1s var(--fx-ease), transform 1.1s var(--fx-ease);
  }
  .fx-in-ready .fx-in :is(h2), .fx-in-ready :is(h2).fx-in { clip-path: inset(0 0 -10% 0); transform: none; }
  .fx-wire { transform: scaleX(0); transition: transform 1.4s var(--fx-ease) .2s; }
  .fx-in .fx-wire, .fx-wire.fx-in { transform: scaleX(1); }


  .button-primary, .fx-magnetic { transition: transform .35s var(--fx-ease), background .25s, color .25s; }
  .fx-tilt.is-visible, .fx-tilt:not(.reveal) { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }

  /* Animaciones ligadas al scroll donde el navegador las soporta */
  @supports (animation-timeline: view()) {
    .about-image-wrap img, .sector-card img {
      animation: fxParallax linear both; animation-timeline: view(); animation-range: cover;
    }
    @keyframes fxParallax { from { transform: scale(1.12) translateY(-3%); } to { transform: scale(1.12) translateY(3%); } }
    .fact { animation: fxLift linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    @keyframes fxLift { from { opacity: .2; transform: translateY(30px); } to { opacity: 1; transform: none; } }
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx-cursor, .fx-circuit .fx-pulse { display: none !important; }
  .fx-circuit .fx-base { stroke-dashoffset: 0 !important; }
  .button-primary::before { display: none; }
}
@media (hover: none), (pointer: coarse) { .fx-cursor { display: none; } }