/* Variante "botón dorado" del sticky (A/B en /hypnosis: naranja vs dorado).
   Solo la carga hypnosis.gold.html, después de prueba-1m-usd-b.css: pisa el botón
   naranja del sticky y la tipografía de la nota. El resto de la página es igual. */

/* sticky "oro pulido": botón metálico glossy. Marco biselado (borde con degradado),
   brillo del esmalte arriba que se funde suave hacia el oro más profundo del medio, texto en
   tinta y un reflejo que cruza el botón cada tanto. Sin halos de colores. */
.sticky-cta__btn,
.sticky-cta__btn:hover {
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #fff4c6 0%, #f8dd86 22%, #ecc350 42%, #dcab32 62%, #e2b741 82%, #f3d478 100%) padding-box,
    linear-gradient(180deg, #fff3bf 0%, #e0b445 22%, #94690f 50%, #d9aa3a 78%, #fbe7a0 100%) border-box;
  color: #261701;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 0 rgba(255, 244, 200, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 3px rgba(125, 80, 5, 0.3),
    0 0 0 1px #6f4e0b,
    0 10px 24px rgba(0, 0, 0, 0.55),
    0 0 26px rgba(240, 200, 95, 0.2);
  transition: filter 0.2s ease;
}
.sticky-cta__btn:hover { filter: brightness(1.06); }
.sticky-cta__btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 30%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.35) 70%, transparent 100%);
  transform: translateX(-120%) skewX(-20deg);
  will-change: transform;
  animation: cta-gold-sweep 3s ease-in-out infinite;
}
@keyframes cta-gold-sweep {
  0% { transform: translateX(-120%) skewX(-20deg); }
  /* el cruce dura lo mismo que con el ciclo de 4.8 s (~1.9 s); solo se acortó la pausa */
  64% { transform: translateX(380%) skewX(-20deg); }
  100% { transform: translateX(380%) skewX(-20deg); }
}
/* una luz que recorre todo el borde, en sentido antihorario: un anillo fino (máscara)
   con un resplandor redondo cuyo centro viaja por el perímetro (--cta-lx / --cta-ly;
   @property permite animarlos). Así la luz mide lo mismo en todo el recorrido y la
   velocidad se reparte por tramo: pareja por arriba y por abajo (33 % del ciclo cada
   uno) y más lenta en los laterales (17 % cada uno, siendo mucho más cortos). */
@property --cta-lx { syntax: "<percentage>"; initial-value: 50%; inherits: false; }
@property --cta-ly { syntax: "<percentage>"; initial-value: 0%; inherits: false; }
.sticky-cta__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  /* el anillo es más grueso arriba que abajo */
  padding: 5px 3px 2px;
  border-radius: 10px;
  pointer-events: none;
  background: radial-gradient(circle 60px at var(--cta-lx) var(--cta-ly), #fff 0%, rgba(255, 252, 235, 0.75) 30%, rgba(255, 250, 225, 0.25) 62%, transparent 100%);
  /* máscara: anillo (caja entera menos el contenido) × un degradado vertical que
     deja la luz entera arriba y la atenúa hacia el borde de abajo */
  -webkit-mask: linear-gradient(180deg, #000 0%, #000 40%, rgba(0, 0, 0, 0.28) 100%), linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: source-in, xor;
  mask-composite: intersect, exclude;
  animation: cta-border-light 3.6s linear infinite;
}
@keyframes cta-border-light {
  0% { --cta-lx: 50%; --cta-ly: 0%; }
  16.5% { --cta-lx: 0%; --cta-ly: 0%; }
  33.5% { --cta-lx: 0%; --cta-ly: 100%; }
  66.5% { --cta-lx: 100%; --cta-ly: 100%; }
  83.5% { --cta-lx: 100%; --cta-ly: 0%; }
  100% { --cta-lx: 50%; --cta-ly: 0%; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta__btn::before { animation: none; }
  .sticky-cta__btn::after { display: none; }
}

/* nota del sticky con la tipografía de la marca "mmmanifest" de la barra de arriba (.timer-bar__brand) */
.sticky-cta__note {
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -0.035em;
}