/* 26 · el efecto de los botones del hero (degradado cónico morado/blanco/azul que gira) llevado, en pequeño,
 * a bordes y líneas divisorias. Siempre tenue: aparece al pasar el mouse o una sola vez al llegar. */

/* borde vivo: el mismo cónico del botón, recortado a 1px con máscara; --luz-o controla la intensidad */
.luz-b { position: relative; }
.luz-b::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--ang), var(--b1), var(--b2) 22%, var(--b3) 40%, var(--b4) 55%, var(--b1) 75%, var(--b2) 90%, var(--b1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: giraBorde 6s linear infinite; opacity: var(--luz-o, 0); transition: opacity .6s; }
.luz-b:hover { --luz-o: .7; }

/* línea viva: un tramo de luz con los colores del botón que recorre una línea divisoria */
@keyframes barre { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@keyframes barreUna { 0% { background-position: 130% 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { background-position: -30% 0; opacity: 0; } }
.luz-l { position: absolute; left: 0; right: 0; height: 1px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent 30%, var(--b3) 40%, var(--b1) 46%, var(--b2) 50%, var(--b1) 54%, var(--b3) 60%, transparent 70%) no-repeat;
  background-size: 250% 100%; filter: drop-shadow(0 0 4px rgb(var(--t1) / .7)); transition: opacity .4s; }

/* ---------- principios: al llegar, la luz recorre la línea de arriba una vez; al pasar el mouse por un principio, recorre su tramo ---------- */
.s2-g { position: relative; }
.s2-g > .luz-l { top: -1px; }
.s2-g.vista > .luz-l { animation: barreUna 2.2s cubic-bezier(.4, 0, .2, 1) .2s both; }
.s2-c > .luz-l { top: -1px; }
.s2-c:hover > .luz-l { opacity: 1; animation: barre 2.6s linear infinite; }
.s2-c:hover h3 { color: var(--kffffff); }
.s2-v { transition: box-shadow .6s; }
.s2-c:hover .s2-v { box-shadow: 0 0 0 1px rgb(var(--t1) / .35), 0 18px 50px -24px rgb(var(--t1) / .7); }

/* ---------- video: el marco lleva el borde del botón, apenas visible, y se aviva con el mouse ---------- */
.sv-marco.luz-b { --luz-o: .35; }
.sv-marco.luz-b:hover { --luz-o: .8; }
.sv-marco.reproduciendo.luz-b { --luz-o: 0; }

/* ---------- ficha de Mariana: cuando un dato llega a su campo, la luz recorre esa línea una vez ---------- */
.sh-f, .sh-who { position: relative; }
.sh-f > .luz-l, .sh-who > .luz-l { bottom: -1px; }
.sh-f.llega > .luz-l, .sh-who.llega > .luz-l { animation: barreUna 1.3s cubic-bezier(.4, 0, .2, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .luz-b::after { animation: none; }
  .luz-l { display: none; }
}