/* Composición visual de los tres servicios. Las imágenes originales se conservan intactas. */
.choice-card .combo-art {
  width: 39%;
  flex: 0 0 39%;
  border-radius: 0 19px 19px 0;
  background: transparent !important;
  box-shadow: none;
  overflow: hidden;
  isolation: isolate;
}
.combo-card .card-overlay { width: 61%; }

/* Cada arte desaparece hacia el fondo y oculta solo la firma incrustada. */
.choice-card[data-choice="canal"] > img {
  -webkit-mask-image: linear-gradient(90deg,transparent 0%,#000 24%,#000 100%),linear-gradient(180deg,#000 0%,#000 74%,transparent 84%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg,transparent 0%,#000 24%,#000 100%),linear-gradient(180deg,#000 0%,#000 74%,transparent 84%);
  mask-composite: intersect;
  background: transparent;
}
.choice-card[data-choice="curso"] > img {
  -webkit-mask-image: linear-gradient(90deg,transparent 0%,#000 24%,#000 100%),linear-gradient(180deg,transparent 0%,transparent 16%,#000 24%,#000 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg,transparent 0%,#000 24%,#000 100%),linear-gradient(180deg,transparent 0%,transparent 16%,#000 24%,#000 100%);
  mask-composite: intersect;
  background: transparent;
}

/* Las capas se cruzan suavemente; el halo queda bajo las imágenes. */
.choice-card .combo-art img {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 64%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  mix-blend-mode: screen;
  background: transparent;
}
.choice-card .combo-art img:first-child {
  left: -2%; right: auto; z-index: 1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 69%,transparent 98%),linear-gradient(180deg,#000 0%,#000 74%,transparent 84%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 69%,transparent 98%),linear-gradient(180deg,#000 0%,#000 74%,transparent 84%);
  mask-composite:intersect;
}
.choice-card .combo-art img:last-child {
  left: auto; right: -1%; z-index: 2;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 100%),linear-gradient(180deg,transparent 0%,transparent 16%,#000 24%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 100%),linear-gradient(180deg,transparent 0%,transparent 16%,#000 24%,#000 100%);
  mask-composite:intersect;
}
.choice-card .combo-art::before {
  content: '' !important;
  display: block !important;
  position: absolute;
  inset: 12% -12%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 42% 30% at 30% 62%,rgba(24,117,255,.23),transparent 75%),radial-gradient(ellipse 42% 30% at 71% 56%,rgba(255,112,26,.22),transparent 75%) !important;
  filter: blur(12px);
  box-shadow: none !important;
}
.choice-card .combo-art::after {
  content: '';
  position: absolute;
  inset: 14% 2%;
  z-index: 3;
  border: 0;
  padding: 1px;
  border-radius: 50%;
  background: linear-gradient(105deg,rgba(43,142,255,.35),rgba(120,120,120,.06) 50%,rgba(255,132,45,.35));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:.65;
  box-shadow:none;
  pointer-events:none;
}

/* Fondos en capas independientes: unión gradual y firma fuera del área visible. */
body[data-service] .service-backdrop {
  background-image: none !important;
  opacity: .22;
  overflow: hidden;
  pointer-events: none;
}
body[data-service] .service-backdrop::before,
body[data-service] .service-backdrop::after {
  content: '';
  position: absolute;
  top: 50%;
  width: min(88vh, 860px);
  height: min(88vh, 860px);
  transform: translateY(-50%);
  pointer-events: none;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
body[data-service="canal"] .service-backdrop::before,
body[data-service="combinado"] .service-backdrop::before {
  left: -5%;
  background-image: url('/assets/telegram-2026.png');
  -webkit-mask-image:radial-gradient(ellipse at center,#000 25%,transparent 72%),linear-gradient(180deg,#000 0%,#000 74%,transparent 84%);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(ellipse at center,#000 25%,transparent 72%),linear-gradient(180deg,#000 0%,#000 74%,transparent 84%);
  mask-composite:intersect;
}
body[data-service="curso"] .service-backdrop::before,
body[data-service="combinado"] .service-backdrop::after {
  left: auto; right: -4%;
  background-image: url('/assets/curso-circular-2026.png');
  -webkit-mask-image:radial-gradient(ellipse at center,#000 22%,transparent 72%),linear-gradient(180deg,transparent 0%,transparent 16%,#000 24%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(ellipse at center,#000 22%,transparent 72%),linear-gradient(180deg,transparent 0%,transparent 16%,#000 24%,#000 100%);
  mask-composite:intersect;
}
body[data-service="canal"] .service-backdrop::after,
body[data-service="curso"] .service-backdrop::after { content:none; }
body.light[data-service] .service-backdrop {opacity:.10;}
@media(max-width:700px){
  .choice-card .combo-art {width:39%;flex-basis:39%;border-radius:0 15px 15px 0}
  .combo-card .card-overlay{width:61%}
  body[data-service] .service-backdrop::before,
  body[data-service] .service-backdrop::after {width:95vw;height:95vw}
  body[data-service="combinado"] .service-backdrop::before{left:-35%;top:37%}
  body[data-service="combinado"] .service-backdrop::after{right:-35%;top:60%}
}

/* En la tarjeta conjunta las dos obras tienen su propio espacio y nunca se pisan. */
.choice-card .combo-art img {
  width:50%; height:auto; max-height:100%; aspect-ratio:1;
  top:50%; bottom:auto; transform:translateY(-50%);
}
.choice-card .combo-art img:first-child {
  left:0; right:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 91%,transparent 100%),linear-gradient(180deg,#000 0%,#000 75%,transparent 79%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 91%,transparent 100%),linear-gradient(180deg,#000 0%,#000 75%,transparent 79%);
  mask-composite:intersect;
}
.choice-card .combo-art img:last-child {
  left:auto; right:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 9%,#000 100%),linear-gradient(180deg,transparent 0%,transparent 16%,#000 23%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 9%,#000 100%),linear-gradient(180deg,transparent 0%,transparent 16%,#000 23%,#000 100%);
  mask-composite:intersect;
}
.choice-card[data-choice="canal"] > img {
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 100%),linear-gradient(180deg,#000 0%,#000 75%,transparent 79%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 100%),linear-gradient(180deg,#000 0%,#000 75%,transparent 79%);
  mask-composite:intersect;
}
body[data-service="canal"] .service-backdrop::before,
body[data-service="combinado"] .service-backdrop::before {
  -webkit-mask-image:radial-gradient(ellipse at center,#000 25%,transparent 72%),linear-gradient(180deg,#000 0%,#000 75%,transparent 79%);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(ellipse at center,#000 25%,transparent 72%),linear-gradient(180deg,#000 0%,#000 75%,transparent 79%);
  mask-composite:intersect;
}

/* Una iluminación ambiental continua une las dos obras sin teñir sus letras. */
.choice-card .combo-art::before {
  inset:-20% -22%;
  background:radial-gradient(ellipse 34% 37% at 28% 52%,rgba(24,124,255,.46),transparent 76%),radial-gradient(ellipse 34% 37% at 72% 52%,rgba(255,120,32,.42),transparent 76%),radial-gradient(ellipse 24% 22% at 50% 52%,rgba(145,149,170,.16),transparent 76%) !important;
  filter:blur(12px);
}
body[data-service="combinado"] .service-backdrop {
  opacity:.42;
  background-image:radial-gradient(ellipse 36% 47% at 37% 47%,rgba(18,105,255,.32),transparent 76%),radial-gradient(ellipse 36% 47% at 66% 48%,rgba(255,112,27,.28),transparent 76%),radial-gradient(ellipse 24% 26% at 51% 50%,rgba(96,104,130,.13),transparent 76%) !important;
  background-size:100% 100%;
  background-position:center;
}
body[data-service="combinado"] .service-backdrop::before,
body[data-service="combinado"] .service-backdrop::after{opacity:.65}
body[data-service="combinado"] .registration::after {
  background:linear-gradient(90deg,rgba(7,7,7,.9) 0%,rgba(7,7,7,.62) 45%,rgba(7,7,7,.20) 100%),linear-gradient(0deg,rgba(7,7,7,.9),transparent 78%);
}
body.light[data-service="combinado"] .service-backdrop{opacity:.19}
body.light[data-service="combinado"] .registration::after {
  background:linear-gradient(90deg,rgba(242,242,242,.92) 0%,rgba(242,242,242,.64) 45%,rgba(242,242,242,.24) 100%),linear-gradient(0deg,rgba(242,242,242,.91),transparent 78%);
}
@media(max-width:700px){
  body[data-service="combinado"] .registration::after{background:linear-gradient(0deg,rgba(7,7,7,.92),rgba(7,7,7,.25) 85%)}
  body.light[data-service="combinado"] .registration::after{background:linear-gradient(0deg,rgba(242,242,242,.93),rgba(242,242,242,.32) 85%)}
}