/* Firma de Bytenauta, común a todas las estéticas: el cromo brillante del álbum de la página de Martina. Su marca real
   (negro #1A1816, naranja #FC4A02, Atkinson Hyperlegible Mono) con troquel metalizado en tonos rojo y oro. El brillo va
   en color-dodge sobre negro puro: el fondo no cambia y solo se avivan logo y letras, así el contraste nunca baja.
   movimiento-firma.js mueve --holo-* y --tilt-*: un vaivén de menos de 5 s al pegarse o al tocarla, que sale de los
   valores de aquí (el reposo) y vuelve a ellos, y el ratón, el desplazamiento o el giroscopio. */
.firma { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; margin-top: 48px; perspective: 800px; }
.firma-pegatina {
  --holo-x: 30%; --holo-y: 50%; --holo-a: 40deg; --tilt-x: 0deg; --tilt-y: 0deg;
  position: relative; isolation: isolate; display: block; width: max-content; max-width: min(100%, 300px); border-radius: 10px;
  color: #F4F3EA; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotate(-1deg);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.firma-pegatina::before { /* troquel holográfico + canto + sombra corta, como el resto de pegatinas */
  content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: 12px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, 0) 62%)
      var(--holo-x) var(--holo-y) / 300% 300% no-repeat,
    conic-gradient(from var(--holo-a), #B8321F, #E8622C 12%, #F9B233 24%, #FFE7A6 33%, #F4A93A 42%, #D0452A 54%,
      #EE8A35 64%, #FFD978 74%, #FFF6DA 79%, #F6BE45 86%, #B8321F);
  box-shadow: 0 0 0 2px rgba(42, 23, 51, .55), 0 5px 0 2px rgba(42, 23, 51, .22);
}
.firma-cara {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto 1fr; align-items: center;
  column-gap: 8px; padding: 6px 10px; background: #000; border-radius: 8px; /* negro puro: el color-dodge no lo toca */
}
.firma-cara::after { /* devuelve el negro de la marca sin apagar el brillo: screen de #1A1816 sobre #000 = #1A1816 */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #1A1816; mix-blend-mode: screen;
}
.firma-marca { display: grid; justify-items: start; gap: 2px; }
.firma-texto { display: grid; gap: 1px; padding-left: 8px; border-left: 1px solid rgba(244, 243, 234, .2); }
.firma-hecho { font: 500 9.5px/1.25 "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace; color: #D9D4CD; } /* 12:1 */
.firma-logo { display: block; width: 78px; max-width: 100%; height: auto; } /* naranja sobre negro 5.2:1 */
.firma-gancho { text-wrap: balance; font: 700 10.5px/1.25 "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: -.02em; color: #F4F3EA; } /* 15.9:1 */
.firma-lema { text-wrap: balance; font: 500 9.5px/1.3 "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace; color: #D9D4CD; } /* 12:1 */
.firma-web {
  display: inline-flex; align-items: center; gap: 3px; color: #FF7A4D; /* 6.9:1 */
  font: 700 10px/1.25 "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace;
  text-decoration: underline; text-underline-offset: 3px;
}
.firma-web .ico { width: 11px; height: 11px; stroke-width: 2.4; }
.firma-brillo {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: color-dodge;
  background: linear-gradient(115deg, transparent 30%, rgba(250, 189, 0, .9) 42%, rgba(255, 227, 110, .95) 50%,
    rgba(250, 189, 0, .9) 58%, transparent 70%); /* brillo dorado */
  background-size: 300% 300%; background-position: var(--holo-x) var(--holo-y);
}
.firma-pegatina.viva { transition: none; }
.firma-pegatina.pegada { animation: pegar-firma 560ms cubic-bezier(.2, .8, .2, 1); }
@keyframes pegar-firma {
  from { transform: translateY(-14px) rotate(-8deg) scale(1.12); }
  to { transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotate(-1deg); }
}
.firma-pegatina:focus-visible { outline-offset: 12px; }
@media (max-width: 359px) { /* móvil estrecho: unos px más para el texto, que así cabe en menos líneas */
  .firma-cara { column-gap: 8px; padding: 7px 10px; }
  .firma-texto { padding-left: 8px; }
  .firma-gancho { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .firma-pegatina { transition: none; }
  .firma-pegatina.pegada { animation: none; }
}