/* ---------------------------------------------------------------
   Send Button (Scrolltide «Send Halo»), sitio Marca, oct-2026.
   Ver send-button.js para cómo se engancha (data-send-button).

   El botón es el CTA de la marca: naranjo plano #D3481D y esquinas
   rectas. El halo es un trazo SVG que recorre el borde (pathLength 100)
   en proporción a --sb-p (0 a 1, lo pone el JS), más un resplandor que
   sube con él. Con todo listo, una franja de luz cruza el botón cada
   pocos segundos: es el movimiento del original, sin WebGL.
--------------------------------------------------------------- */
.sb { --sb-p: 0; --sb-color: #D3481D; --sb-halo: #f4b300; position: relative; display: block; margin-top: 4px; isolation: isolate; }
.sb .sb__boton { position: relative; overflow: hidden; width: 100%; margin: 0; border-radius: 0; background: var(--sb-color); color: #fff; box-shadow: 0 0 calc(4px + var(--sb-p) * 22px) calc(var(--sb-p) * 3px) color-mix(in srgb, var(--sb-halo) calc(var(--sb-p) * 70%), transparent); transition: box-shadow 0.45s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)), transform 0.1s, filter 0.15s; }
.sb .sb__boton > * { position: relative; z-index: 1; }
.sb__aro { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); pointer-events: none; overflow: visible; z-index: 2; }
.sb__aro rect { fill: none; stroke: var(--sb-halo); stroke-width: 2.5; stroke-dasharray: calc(var(--sb-p) * 100) 100; transition: stroke-dasharray 0.45s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)); }
/* Franja de luz: solo con todo listo. */
.sb .sb__boton::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.42) 48%, transparent 66%); transform: translateX(-110%); opacity: 0; }
.sb.sb--listo .sb__boton::after { opacity: 1; animation: sb-barre 2.8s 0.2s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
@keyframes sb-barre { 0% { transform: translateX(-110%); } 55%, 100% { transform: translateX(110%); } }
.sb .sb__boton[disabled]::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .sb .sb__boton, .sb__aro rect { transition: none; }
  .sb.sb--listo .sb__boton::after { animation: none; opacity: 0; }
}