/* TATUARTE · B410 FIX6 · Audience professional card + exact 20px gap
   UI only. Mantiene FIX4 como base y añade únicamente:
   - fondo sobrio en la tarjeta profesional;
   - gap exacto de 20px entre tarjetas.
   No modifica Blade de home, copy, rutas ni datos. */

.r24-audiences .r24-audience-grid{
  gap:20px !important;
}

.r24-audiences .r24-audience-card{
  min-height:270px;
}

.r24-audiences .r24-audience-card.r24-audience-pro{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:270px;
  border-radius:18px;
  border:1px solid rgba(17,17,17,.08) !important;
  background:
    linear-gradient(90deg,
      rgba(249,248,246,.98) 0%,
      rgba(249,248,246,.96) 34%,
      rgba(249,248,246,.88) 52%,
      rgba(249,248,246,.52) 72%,
      rgba(249,248,246,.16) 100%),
    url('/build/assets/tatuarte-audience-pro-fix6.webp') 82% 50% / cover no-repeat !important;
  box-shadow:0 14px 38px rgba(20,20,22,.09), inset 0 1px 0 rgba(255,255,255,.55);
}

.r24-audiences .r24-audience-card.r24-audience-pro::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.20),transparent 30% 72%,rgba(0,0,0,.02));
}

.r24-audiences .r24-audience-pro > span,
.r24-audiences .r24-audience-pro h3,
.r24-audiences .r24-audience-pro p,
.r24-audiences .r24-audience-pro > div{
  position:relative;
  z-index:1;
}

.r24-audiences .r24-audience-pro > span{color:rgba(17,17,17,.62) !important;}
.r24-audiences .r24-audience-pro h3{color:#111 !important;}
.r24-audiences .r24-audience-pro p{
  color:rgba(17,17,17,.78) !important;
  max-width:29rem;
}

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

.r24-audiences .r24-audience-pro a:nth-child(2){
  color:#111 !important;
  background:rgba(255,255,255,.74) !important;
  border-color:rgba(17,17,17,.24) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.r24-audiences .r24-audience-pro a:first-child:hover{transform:translateY(-1px);}
.r24-audiences .r24-audience-pro a:nth-child(2):hover{background:rgba(255,255,255,.88) !important;}

@media (max-width:900px){
  .r24-audiences .r24-audience-card.r24-audience-pro{
    background:
      linear-gradient(90deg,
        rgba(249,248,246,.98) 0%,
        rgba(249,248,246,.94) 44%,
        rgba(249,248,246,.78) 66%,
        rgba(249,248,246,.26) 100%),
      url('/build/assets/tatuarte-audience-pro-fix6.webp') 88% 50% / cover no-repeat !important;
  }
}

@media (max-width:640px){
  .r24-audiences .r24-audience-card.r24-audience-pro{
    min-height:300px;
    background:
      linear-gradient(90deg,
        rgba(249,248,246,.98) 0%,
        rgba(249,248,246,.94) 56%,
        rgba(249,248,246,.60) 78%,
        rgba(249,248,246,.18) 100%),
      url('/build/assets/tatuarte-audience-pro-fix6.webp') 76% 50% / cover no-repeat !important;
  }
  .r24-audiences .r24-audience-pro p{max-width:100%;}
}

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