/* Capa de detalles de interacción, común a todas las páginas (ver fx.js y campo.js).
   No cambia el contenido ni la maquetación: si estos archivos no cargan, la página se ve igual.
   Colores de la marca (Ink, Cyan, Sky, Paper) y su curva de movimiento. */

/* ── campo WebGL del encabezado (campo.js) ── */
.hero.has-campo { position: relative; overflow: hidden; }
.hero.has-campo > .page { position: relative; z-index: 1; }
.campo {
  position: absolute; z-index: 0; top: 0; right: 0; width: 70%; height: 100%;
  pointer-events: none; opacity: 0; will-change: transform;
  transition: opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.campo.is-on { opacity: 1; }
@media (max-width: 900px) {
  .hero.has-campo { padding-bottom: 9.5rem; }
  .campo { width: 100%; height: 10.5rem; top: auto; bottom: 0; }
}

/* ── entrada del encabezado: cada bloque sube en su turno, cuando el telón ya se levantó ── */
@keyframes fx-sube { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; } }
.hero-content > * { animation: fx-sube 760ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 420ms; }
.hero-content > *:nth-child(2) { animation-delay: 500ms; }
.hero-content > *:nth-child(3) { animation-delay: 590ms; }
.hero-content > *:nth-child(4) { animation-delay: 680ms; }

/* ── avance de lectura, en el borde inferior de la barra superior ── */
.fx-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; z-index: 2;
  background: var(--cyan, #009ACE); transform: scaleX(0); transform-origin: left center;
  pointer-events: none;
}

/* ── luz que sigue al puntero sobre las tarjetas ── */
.fx .line:hover, .fx .line:focus-visible {
  background-image: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(0, 154, 206, 0.42), rgba(0, 154, 206, 0) 70%);
}
.fx .cell:hover, .fx .cert-card:hover, .fx .pre-card:hover, .fx .service-card:hover,
.fx .protocol-card:hover, .fx .diff-card:hover, .fx .feature:hover {
  background-image: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 154, 206, 0.10), rgba(0, 154, 206, 0) 70%);
}
.fx .stat:hover {
  background-image: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 154, 206, 0.30), rgba(0, 154, 206, 0) 70%);
}
/* una línea cian se traza en el borde superior de la tarjeta bajo el puntero */
.fx .cell, .fx .cert-card, .fx .service-card, .fx .protocol-card, .fx .diff-card, .fx .feature, .fx .stat { position: relative; }
.fx .cell::before, .fx .cert-card::before, .fx .service-card::before, .fx .protocol-card::before,
.fx .diff-card::before, .fx .feature::before, .fx .stat::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--cyan, #009ACE); transform: scaleX(0); transform-origin: left center;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none;
}
.fx .cell:hover::before, .fx .cert-card:hover::before, .fx .service-card:hover::before, .fx .protocol-card:hover::before,
.fx .diff-card:hover::before, .fx .feature:hover::before, .fx .stat:hover::before { transform: scaleX(1); }
/* la flecha de «Ver la línea» avanza */
.line-go span { display: inline-block; transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1); }
.line:hover .line-go span, .line:focus-visible .line-go span { transform: translateX(5px); }

/* ── inicio: un pulso recorre el borde superior de las seis líneas (una misma suite) ── */
.lines-grid { position: relative; }
.lines-grid::before {
  content: ''; position: absolute; left: -1px; right: -1px; top: -2px; height: 3px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 154, 206, 0), #009ACE 50%, rgba(0, 154, 206, 0)) no-repeat;
  background-size: 22% 100%; background-position: -29% 0;
  animation: fx-bus 6.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes fx-bus { from { background-position: -29% 0; } to { background-position: 129% 0; } }

/* ── secciones oscuras: retícula de puntos y una luz cian que sigue al puntero ── */
.fx-lit { position: relative; overflow: hidden; }
.fx-lit > .page { position: relative; z-index: 1; }
.fx-lit.fx-dots { background-image: radial-gradient(rgba(167, 220, 238, 0.085) 1px, transparent 1px); background-size: 22px 22px; }
.fx-glow {
  position: absolute; left: 0; top: 0; width: 760px; height: 760px; margin: -380px 0 0 -380px; z-index: 0;
  border-radius: 50%; pointer-events: none; will-change: transform;
  background: radial-gradient(closest-side, rgba(0, 154, 206, 0.26), rgba(0, 154, 206, 0.09) 46%, rgba(0, 154, 206, 0) 72%);
}

/* ── botón principal: un destello lo cruza al pasar el puntero ── */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(167, 220, 238, 0) 36%, rgba(167, 220, 238, 0.42) 50%, rgba(167, 220, 238, 0) 64%);
  transform: translateX(-130%);
}
.btn-primary:hover::after { transform: translateX(130%); transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1); }

/* ── cifras que cuentan: ancho estable mientras suben ── */
.fx .line-fact-n, .fx .stat-val { font-variant-numeric: tabular-nums; }

/* ── imágenes de equipos: se inclinan hacia el puntero ── */
.fx-tilt { transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), filter 420ms cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; }
.fx-tilt.is-live { transition-duration: 120ms; filter: drop-shadow(0 18px 28px rgba(18, 35, 62, 0.18)); }

@media (prefers-reduced-motion: reduce) {
  .hero-content > * { animation: none; }
  .lines-grid::before { animation: none; display: none; }
  .btn-primary::after { display: none; }
  .fx .cell::before, .fx .cert-card::before, .fx .service-card::before, .fx .protocol-card::before,
  .fx .diff-card::before, .fx .feature::before, .fx .stat::before { transition: none; }
  .fx-tilt { transition: none; }
}