/* Capa fibra: hebras de luz, degradados fluidos y brillo que sigue al cursor.
   Todo decorativo, sobre fondo blanco, sin alterar la estructura. */

@keyframes pv-flow { to { background-position: 200% 0; } }
@keyframes pv-strand { 0% { transform: translateX(-12%); } 50% { transform: translateX(12%); } 100% { transform: translateX(-12%); } }
@keyframes pv-pulse { 0%, 100% { opacity: .25; } 50% { opacity: .7; } }
@keyframes pv-dash { to { stroke-dashoffset: -400; } }

/* --- Hebras de fibra: separador vivo entre secciones --- */
.pv-fibers {
  position: relative;
  height: 92px;
  margin: 0;
  width: 100%;
  flex: 0 0 auto;
  overflow: hidden;
  background: #fff;
  pointer-events: none;
}
.pv-fibers svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pv-fibers path {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 14 26;
  animation: pv-dash 9s linear infinite;
}
.pv-fibers path:nth-child(1) { stroke: rgba(230, 0, 18, .34); stroke-width: 1.3; animation-duration: 11s; }
.pv-fibers path:nth-child(2) { stroke: rgba(230, 0, 18, .18); stroke-width: 1; animation-duration: 14s; }
.pv-fibers path:nth-child(3) { stroke: rgba(20, 24, 30, .1); stroke-width: 1; animation-duration: 17s; }
.pv-fibers path:nth-child(4) { stroke: rgba(255, 122, 128, .3); stroke-width: 1.2; animation-duration: 20s; }
.pv-fibers::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, transparent 18%, transparent 82%, #fff 100%);
}

/* --- Aureola fluida detrás de secciones clave --- */
.hero::after,
.connection-solutions::before,
.enterprise::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 0, 18, .12), transparent 62%);
  filter: blur(12px);
  animation: pv-pulse 9s ease-in-out infinite;
  pointer-events: none;
}
.hero::after { right: -180px; top: -220px; }
/* El brillo sobresale 180px a la derecha: sin recorte crea scroll horizontal. */
.hero { position: relative; overflow-x: clip; }
.connection-solutions { position: relative; }
.connection-solutions::before { left: -240px; bottom: -260px; }

/* --- Título: subrayado de fibra que respira --- */
.hero h1 em,
h2 em {
  position: relative;
  background: linear-gradient(100deg, #e60012, #ff5b64, #e60012);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: pv-flow 8s linear infinite;
}
.hero h1 em::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: .04em;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(230, 0, 18, .55), transparent);
  animation: pv-strand 7s ease-in-out infinite;
}

/* --- Pastilla de sección con punto luminoso --- */
.section-no::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pv-red, #e60012);
  box-shadow: 0 0 0 4px rgba(230, 0, 18, .14);
  animation: pv-pulse 3.2s ease-in-out infinite;
}

/* --- Brillo que sigue al cursor sobre tarjetas --- */
.service-strip article,
.connection-card-grid article,
.isp-card,
.support-grid a,
.plan-card { position: relative; }
.service-strip article::after,
.connection-card-grid article::after,
.isp-card::after,
.support-grid a::after,
.plan-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(230, 0, 18, .1), transparent 60%);
  transition: opacity .35s ease;
  pointer-events: none;
}
.service-strip article:hover::after,
.connection-card-grid article:hover::after,
.isp-card:hover::after,
.support-grid a:hover::after,
.plan-card:hover::after { opacity: 1; }
.service-strip article > *,
.connection-card-grid article > *,
.isp-card > *,
.support-grid a > * { position: relative; z-index: 1; }

/* --- Botón principal con degradado en movimiento --- */
.button:not(.ghost) {
  background: linear-gradient(100deg, #e60012, #ff3b46, #e60012) !important;
  background-size: 200% 100% !important;
  animation: pv-flow 10s linear infinite;
}

/* --- Malla de fibra tenue en el bloque empresarial --- */
.enterprise.isp-specialized {
  position: relative;
  background-image:
    repeating-linear-gradient(115deg, rgba(230, 0, 18, .05) 0 1px, transparent 1px 46px),
    radial-gradient(900px 380px at 15% 0%, rgba(230, 0, 18, .05), transparent 60%);
  background-color: #fff;
}

/* --- Pie de página con hilo de luz superior --- */
.site-footer-clean, footer.index-footer { position: relative; }
.site-footer-clean::before, footer.index-footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #e60012, #ff7a80, transparent);
  background-size: 200% 100%;
  animation: pv-flow 12s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .pv-fibers path,
  .hero::after, .connection-solutions::before, .enterprise::before,
  .hero h1 em, .hero h1 em::after, .section-no::before,
  .button:not(.ghost),
  .site-footer-clean::before, footer.index-footer::before { animation: none !important; }
}
@media (max-width: 700px) {
  .pv-fibers { height: 78px; }
}