/* Elementos tomados de la invitación: logo de calaveras, S tachada con X roja y marcas X regadas */

.brand { position: relative; }
.brand__logo {
  display: block;
  width: clamp(92px, 12vw, 160px);
  height: auto;
  margin: 0 auto var(--sp-2);
  filter: drop-shadow(0 0 18px rgba(255, 31, 45, 0.5));
}

/* Última letra del nombre: tachada con una X roja oscura detrás, como "DARKNESS" del flyer */
.brand__s { position: relative; display: inline-block; color: var(--c-red); isolation: isolate; }
.brand__s::before,
.brand__s::after {
  content: '';
  position: absolute;
  left: -18%;
  right: -18%;
  top: 44%;
  height: 0.2em;
  background: #5a0008;
  transform: rotate(45deg);
  z-index: -1;
}
.brand__s::after { transform: rotate(-45deg); }

/* Marcas X regadas, rojas y blancas, como en el flyer */
.flyer-marks { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.fx { position: absolute; width: 22px; height: 22px; }
.fx::before,
.fx::after {
  content: '';
  position: absolute;
  inset: 42% 0;
  background: var(--c-red);
  transform: rotate(45deg);
}
.fx::after { transform: rotate(-45deg); }
.fx--white::before, .fx--white::after { background: var(--c-ink); }
.fx--1 { top: 22%; left: 8%; }
.fx--2 { top: 27%; left: 13%; width: 11px; height: 11px; }
.fx--3 { top: 64%; right: 7%; width: 30px; height: 30px; }
.fx--4 { top: 18%; right: 12%; width: 14px; height: 14px; }
.fx--5 { top: 58%; left: 6%; width: 16px; height: 16px; }
.fx--6 { top: 70%; right: 14%; width: 12px; height: 12px; }

@media (max-width: 760px) {
  .brand__logo { width: 88px; }
  .fx--1 { top: 16%; left: 5%; }
  .fx--4 { top: 14%; right: 6%; }
  .fx--3 { top: 44%; right: 4%; width: 22px; height: 22px; }
  .fx--6 { top: 52%; right: 9%; }
}