/* TATUARTE · B410 FIX4 · Audience collage · UI only
   Objetivo: usar el collage aportado por SER dentro del bloque real
   "Quiero tatuarme / encontrar profesional", sin alterar contenido, rutas ni datos.
   El asset se publica en el document root HTTP real y también en public_path(). */

.r24-audiences[data-r24-band="audiences"]{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 10%,rgba(0,190,204,.07),transparent 30%),
    radial-gradient(circle at 8% 92%,rgba(255,46,166,.06),transparent 28%),
    #f5f4f2 !important;
}

.r24-audiences .r23-band-inner.r24-audiences-inner{
  position:relative;
  z-index:1;
}

.r24-audiences .r24-audience-grid{
  align-items:stretch;
}

/* La imagen vive exactamente en la tarjeta de cliente solicitada. */
.r24-audiences .r24-audience-card.r24-audience-client{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:270px;
  border:1px solid rgba(255,255,255,.38) !important;
  border-radius:18px;
  background:
    linear-gradient(90deg,
      rgba(8,8,11,.91) 0%,
      rgba(8,8,11,.79) 38%,
      rgba(8,8,11,.50) 66%,
      rgba(8,8,11,.20) 100%),
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.18)),
    url('/build/assets/tatuarte-audience-collage-fix4.webp') 52% 50% / cover no-repeat !important;
  box-shadow:0 18px 50px rgba(15,15,18,.18), inset 0 1px 0 rgba(255,255,255,.18);
}

.r24-audiences .r24-audience-card.r24-audience-client::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 88% 15%,rgba(0,222,238,.18),transparent 27%),
    radial-gradient(circle at 76% 88%,rgba(255,39,169,.18),transparent 28%);
  mix-blend-mode:screen;
}

.r24-audiences .r24-audience-card.r24-audience-client::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 32% 70%,rgba(255,255,255,.05));
}

.r24-audiences .r24-audience-client > span,
.r24-audiences .r24-audience-client h3{
  color:#fff !important;
  text-shadow:0 2px 18px rgba(0,0,0,.38);
}

.r24-audiences .r24-audience-client p{
  color:rgba(255,255,255,.90) !important;
  max-width:36rem;
  text-shadow:0 1px 12px rgba(0,0,0,.32);
}

.r24-audiences .r24-audience-client > div{
  position:relative;
  z-index:2;
}

.r24-audiences .r24-audience-client a:first-child{
  color:#111 !important;
  background:#fff !important;
  border-color:#fff !important;
  box-shadow:0 10px 28px rgba(0,0,0,.20);
}

.r24-audiences .r24-audience-client a:nth-child(2){
  color:#fff !important;
  background:rgba(12,12,15,.38) !important;
  border-color:rgba(255,255,255,.68) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.r24-audiences .r24-audience-client a:first-child:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 32px rgba(0,0,0,.24);
}

.r24-audiences .r24-audience-client a:nth-child(2):hover{
  background:rgba(12,12,15,.56) !important;
}

.r24-audiences .r24-audience-card.r24-audience-pro{
  border-radius:18px;
  background:rgba(255,255,255,.90) !important;
  border-color:rgba(17,17,17,.10) !important;
  box-shadow:0 14px 38px rgba(20,20,22,.07);
}

@media (max-width:900px){
  .r24-audiences .r24-audience-card.r24-audience-client{
    min-height:255px;
    background-position:58% 50% !important;
  }
}

@media (max-width:640px){
  .r24-audiences .r24-audience-card.r24-audience-client{
    min-height:300px;
    background:
      linear-gradient(90deg,rgba(8,8,11,.90),rgba(8,8,11,.65)),
      linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.20)),
      url('/build/assets/tatuarte-audience-collage-fix4.webp') 56% 50% / cover no-repeat !important;
  }
  .r24-audiences .r24-audience-client p{max-width:100%}
}

@media (prefers-reduced-motion:reduce){
  .r24-audiences .r24-audience-client a{transition:none !important}
  .r24-audiences .r24-audience-client a:hover{transform:none !important}
}