/* Cierres de servicios: una banda oscura continua que recibe únicamente recortes extraídos. */
.service-detail-page .detail-contact[data-closing-theme] {
  --closing-carbon: #211D25;
  --closing-ivory: #F6F3E9;
  --closing-lilac: #B27AF4;
  --closing-violet: #5E3581;
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 7vw, 88px);
  color: var(--closing-ivory);
  background-color: var(--closing-violet);
  background-image:
    radial-gradient(circle at 83% 12%, rgba(178, 122, 244, .19), transparent 27%),
    linear-gradient(111deg, rgba(33, 29, 37, .94) 0%, rgba(94, 53, 129, .93) 48%, rgba(94, 53, 129, .91) 100%),
    url('/assets/backgrounds/contacto-geometria.webp');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.service-detail-page .detail-contact[data-closing-theme]::before {
  z-index: 0;
  right: -7%;
  bottom: -54%;
  width: clamp(190px, 25vw, 390px);
  border-color: rgba(178, 122, 244, .24);
  box-shadow: 0 0 0 32px rgba(178, 122, 244, .045), 0 0 76px rgba(178, 122, 244, .14);
}

.service-detail-page .detail-contact[data-closing-theme] .detail-reference-layout {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
}

/* Texto y llamada a la izquierda; el recorte de los tres paneles se conserva entero a la derecha. */
.service-detail-page .detail-contact[data-closing-theme] .detail-reference-layout--advertising {
  grid-template-columns: minmax(0, .86fr) minmax(570px, 1.12fr);
  gap: clamp(32px, 4.7vw, 68px);
  align-items: center;
}

/* El gráfico y la pantalla se apoyan al lado derecho de su contenido, sin tarjetas sustitutas. */
.service-detail-page .detail-contact[data-closing-theme] .detail-reference-layout--automation {
  grid-template-columns: minmax(0, .9fr) minmax(510px, 1.1fr);
  gap: clamp(32px, 5.2vw, 76px);
  align-items: center;
}

.service-detail-page .detail-contact[data-closing-theme] .detail-reference-layout--web {
  grid-template-columns: minmax(0, .93fr) minmax(520px, 1.07fr);
  gap: clamp(32px, 5.2vw, 76px);
  align-items: center;
}

/* Tres columnas de la referencia: texto, teléfono y llamada. */
.service-detail-page .detail-contact[data-closing-theme] .detail-reference-layout--creative {
  grid-template-columns: minmax(0, 1.08fr) minmax(250px, .64fr) minmax(285px, .86fr);
  gap: clamp(24px, 3.25vw, 48px);
  align-items: center;
}

.service-detail-page .detail-contact[data-closing-theme] .detail-final-main {
  min-width: 0;
}

.service-detail-page .detail-contact[data-closing-theme] .detail-final-main h2 {
  max-width: 760px;
  margin: 0;
  color: var(--closing-ivory);
  font-family: Montserrat, sans-serif;
  font-size: clamp(32px, 3.55vw, 46px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.045em;
}

.service-detail-page .detail-contact[data-closing-theme] .detail-final-main h2 span {
  color: var(--closing-lilac);
}

.service-detail-page .detail-contact[data-closing-theme] .detail-final-main .detail-content {
  max-width: 710px;
  margin-top: 20px;
  color: rgba(246, 243, 233, .97);
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.75;
}

.service-detail-page .detail-contact[data-closing-theme] .detail-final-main .detail-content p {
  max-width: none;
  margin: 0 0 19px;
}

.service-detail-page .detail-contact[data-closing-theme] .detail-final-main .detail-content p:last-child {
  margin-bottom: 0;
}

.service-detail-page .detail-contact[data-closing-theme] .detail-close-callout {
  min-width: 0;
  padding: clamp(20px, 2.2vw, 28px);
  color: var(--closing-ivory);
  border: 1px solid rgba(178, 122, 244, .26);
  border-radius: 18px;
  background: rgba(33, 29, 37, .38);
  box-shadow: 0 18px 40px rgba(33, 29, 37, .16);
  backdrop-filter: blur(10px);
}

.service-detail-page .detail-contact[data-closing-theme] .detail-close-callout h3 {
  margin: 0 0 12px;
  color: var(--closing-ivory);
  font-family: Montserrat, sans-serif;
  font-size: clamp(20px, 1.85vw, 23px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.03em;
}

.service-detail-page .detail-contact[data-closing-theme] .detail-close-callout p {
  max-width: none;
  margin: 0;
  color: rgba(246, 243, 233, .96);
  font-size: clamp(15px, 1.18vw, 16px);
  line-height: 1.7;
}

.service-detail-page .detail-contact[data-closing-theme] .detail-close-callout .detail-contact-action {
  margin-top: 20px;
}

.service-detail-page .detail-contact[data-closing-theme] .detail-close-callout .detail-contact-action .button {
  color: var(--closing-carbon);
  border-color: var(--closing-lilac);
  background: var(--closing-lilac);
}

.service-detail-page .detail-contact[data-closing-theme] .detail-close-callout .detail-contact-action .button:hover {
  color: var(--closing-carbon);
  border-color: var(--closing-ivory);
  background: var(--closing-ivory);
}

/* Las figuras son los propios recortes: no llevan marco, fondo, sombra ni sustituciones dibujadas. */
.service-detail-page .detail-contact[data-closing-theme] .detail-closing-visual {
  --closing-visual-ratio: 1 / 1;
  position: relative;
  min-width: 0;
  margin: 0;
  aspect-ratio: var(--closing-visual-ratio);
}

.service-detail-page .detail-contact[data-closing-theme] .detail-closing-visual .detail-extracted-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Publicidad: la captura mantiene sus tres columnas; los rótulos se colocan sobre su área de texto limpia. */
.service-detail-page .detail-contact[data-closing-theme="advertising"] .detail-final-main .detail-close-callout {
  width: min(100%, 560px);
  margin-top: 26px;
}

.service-detail-page .detail-contact[data-closing-theme="advertising"] .detail-closing-visual--advertising {
  --closing-visual-ratio: 752 / 178;
  width: min(100%, 680px);
  justify-self: end;
}

.service-detail-page .detail-contact[data-closing-theme="advertising"] .detail-reference-labels {
  position: absolute;
  top: 49%;
  right: 0;
  bottom: 3%;
  left: 0;
  display: grid;
  grid-template-columns: 31% 31% 32%;
  column-gap: 3%;
  pointer-events: none;
}

.service-detail-page .detail-contact[data-closing-theme="advertising"] .detail-reference-labels span {
  display: grid;
  min-width: 0;
  place-items: center;
  padding-inline: 4px;
  color: var(--closing-ivory);
  font-family: Montserrat, sans-serif;
  font-size: clamp(14px, 1.12vw, 15px);
  font-weight: 700;
  line-height: 1.22;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* Automatización: gráfico extraído arriba y llamada debajo, dentro del mismo lateral derecho. */
.service-detail-page .detail-contact[data-closing-theme] .detail-closing-aside {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(16px, 2vw, 24px);
}

.service-detail-page .detail-contact[data-closing-theme="automation"] .detail-closing-visual--automation {
  --closing-visual-ratio: 670 / 238;
  width: min(100%, 670px);
  align-self: end;
}

.service-detail-page .detail-contact[data-closing-theme="automation"] .detail-closing-aside .detail-close-callout {
  width: min(100%, 580px);
  align-self: end;
}

/* El teléfono conserva el recorte parcial original y se apoya en el borde inferior de la composición. */
.service-detail-page .detail-contact[data-closing-theme="creative"] .detail-closing-visual--creative {
  --closing-visual-ratio: 297 / 320;
  width: min(100%, 320px);
  align-self: end;
  justify-self: center;
}

.service-detail-page .detail-contact[data-closing-theme="creative"] .detail-close-callout {
  align-self: center;
}

/* La pantalla original se alinea al borde inferior; el llamado permanece dentro de .detail-final-main. */
.service-detail-page .detail-contact[data-closing-theme="web"] .detail-final-main .detail-close-callout {
  width: min(100%, 590px);
  margin-top: 26px;
}

.service-detail-page .detail-contact[data-closing-theme="web"] .detail-closing-visual--web {
  --closing-visual-ratio: 789 / 223;
  width: min(100%, 700px);
  align-self: center;
  justify-self: end;
}

@media (max-width: 1120px) {
  .service-detail-page .detail-contact[data-closing-theme] .detail-reference-layout--creative {
    grid-template-columns: minmax(0, 1fr) minmax(230px, .56fr);
    gap: clamp(26px, 4.5vw, 46px);
  }

  .service-detail-page .detail-contact[data-closing-theme="creative"] .detail-reference-layout--creative > .detail-close-callout {
    grid-column: 1 / -1;
    width: min(100%, 680px);
    justify-self: start;
  }

  .service-detail-page .detail-contact[data-closing-theme="creative"] .detail-closing-visual--creative {
    width: min(100%, 300px);
  }
}

@media (max-width: 920px) {
  .service-detail-page .detail-contact[data-closing-theme] .detail-reference-layout,
  .service-detail-page .detail-contact[data-closing-theme] .detail-reference-layout--advertising,
  .service-detail-page .detail-contact[data-closing-theme] .detail-reference-layout--automation,
  .service-detail-page .detail-contact[data-closing-theme] .detail-reference-layout--creative,
  .service-detail-page .detail-contact[data-closing-theme] .detail-reference-layout--web {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .service-detail-page .detail-contact[data-closing-theme="advertising"] .detail-closing-visual--advertising,
  .service-detail-page .detail-contact[data-closing-theme="automation"] .detail-closing-visual--automation,
  .service-detail-page .detail-contact[data-closing-theme="web"] .detail-closing-visual--web {
    justify-self: start;
  }

  .service-detail-page .detail-contact[data-closing-theme="advertising"] .detail-closing-visual--advertising {
    width: min(100%, 680px);
  }

  .service-detail-page .detail-contact[data-closing-theme="automation"] .detail-closing-aside {
    width: min(100%, 670px);
  }

  .service-detail-page .detail-contact[data-closing-theme="web"] .detail-closing-visual--web {
    width: min(100%, 700px);
  }

  .service-detail-page .detail-contact[data-closing-theme="creative"] .detail-reference-layout--creative > .detail-close-callout {
    grid-column: auto;
    width: 100%;
  }

  .service-detail-page .detail-contact[data-closing-theme="creative"] .detail-closing-visual--creative {
    width: min(100%, 300px);
    justify-self: center;
  }
}

@media (max-width: 620px) {
  .service-detail-page .detail-contact[data-closing-theme] {
    padding-block: 52px;
  }

  .service-detail-page .detail-contact[data-closing-theme] .detail-final-main h2 {
    font-size: clamp(32px, 9vw, 40px);
  }

  .service-detail-page .detail-contact[data-closing-theme] .detail-close-callout {
    padding: 21px;
  }

  .service-detail-page .detail-contact[data-closing-theme="advertising"] .detail-reference-labels {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }

  .service-detail-page .detail-contact[data-closing-theme="advertising"] .detail-reference-labels span {
    align-items: start;
    padding: 0 2px;
    font-size: 14px;
    line-height: 1.28;
  }

  .service-detail-page .detail-contact[data-closing-theme="creative"] .detail-closing-visual--creative {
    width: min(100%, 297px);
  }
}

@media (max-width: 420px) {
  .service-detail-page .detail-contact[data-closing-theme] .detail-reference-layout {
    gap: 26px;
  }

  .service-detail-page .detail-contact[data-closing-theme="advertising"] .detail-reference-labels {
    gap: 5px;
  }

  .service-detail-page .detail-contact[data-closing-theme="advertising"] .detail-reference-labels span {
    font-size: 14px;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-detail-page .detail-contact[data-closing-theme] .detail-close-callout .button {
    transition-duration: .01ms;
    animation-duration: .01ms;
    animation-iteration-count: 1;
  }
}