/* Acabado de vidrio iluminado para la galería de servicios. */
main .services-section .vitrine-card {
  border: 1.5px solid rgba(255, 255, 255, .96) !important;
  box-shadow:
    0 12px 26px rgba(36, 40, 45, .08),
    0 3px 8px rgba(50, 54, 58, .04),
    inset 0 2px 2px rgba(255, 255, 255, .98),
    inset 0 -3px 8px rgba(255, 255, 255, .72) !important;
}

main .services-section .vitrine-card::before,
main .services-section .vitrine-card[data-showcase-position="center"]::before {
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, .44) 0%,
    rgba(255, 255, 255, .74) 42%,
    rgba(255, 255, 255, .97) 60%,
    #fff 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

main .services-section .vitrine-card::after {
  background:
    linear-gradient(90deg, transparent 10%, rgba(255, 255, 255, .86) 50%, transparent 90%) bottom / 100% 3px no-repeat,
    linear-gradient(135deg, rgba(255, 255, 255, .44), transparent 30%, transparent 75%, rgba(255, 255, 255, .26)) !important;
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, .96),
    inset 2px 0 2px rgba(255, 255, 255, .62),
    inset -2px 0 2px rgba(255, 255, 255, .62),
    inset 0 -7px 12px rgba(255, 255, 255, .48) !important;
}

main .services-section .vitrine-card .service-photo-visual {
  border: 1px solid rgba(255, 255, 255, .94);
  box-shadow: 0 5px 14px rgba(44, 77, 104, .13), inset 0 1px 1px #fff;
}

/* El número acompaña el pie de ambas galerías. */
main .services-section .vitrine-card .card-top {
  inset: auto 32px 32px auto;
}

main .services-section .vitrine-card .card-link {
  max-width: calc(100% - 72px);
}

@media (max-width: 760px) {
  main .services-section .vitrine-card .card-top {
    inset: auto 24px 24px auto;
  }
}

/* El vidrio de los pasos oculta el contenido posterior bajo el texto. */
main .services-section.process-journey .journey-card::before,
main .services-section.process-journey .journey-card[data-showcase-position="center"]::before {
  background: linear-gradient(to bottom,
    rgba(255,255,255,.44) 0%,
    rgba(255,255,255,.74) 42%,
    rgba(255,255,255,.97) 60%,
    #fff 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

main .services-section.process-journey .journey-card[data-showcase-position="left-near"],
main .services-section.process-journey .journey-card[data-showcase-position="right-near"] {
  opacity: .9;
  filter: blur(1px);
}

/* Ambas galerías giran en un carrusel con profundidad. */
main .services-section .service-grid {
  --showcase-near: clamp(150px, 14vw, 235px);
  --showcase-far: clamp(265px, 24vw, 380px);
  perspective: 1100px;
}

main .services-section .vitrine-card {
  background: rgba(255, 255, 255, .98);
  transform: translate3d(var(--showcase-x, 0px), var(--showcase-y, 0px), var(--showcase-z, 0px)) rotateY(var(--showcase-angle, 0deg)) scale(var(--showcase-scale, 1));
  transition: transform .72s cubic-bezier(.22,.7,.18,1), opacity .58s ease, filter .58s ease, box-shadow .3s ease;
}

main .services-section .vitrine-card[data-showcase-position="center"] {
  --showcase-y: 0px;
  --showcase-z: 0px;
}

main .services-section .vitrine-card[data-showcase-position="left-near"],
main .services-section.process-journey .journey-card[data-showcase-position="left-near"] {
  --showcase-y: 18px;
  --showcase-z: -75px;
  --showcase-angle: 27deg;
  --showcase-scale: .86;
  opacity: .98;
  filter: blur(1px);
}

main .services-section .vitrine-card[data-showcase-position="right-near"],
main .services-section.process-journey .journey-card[data-showcase-position="right-near"] {
  --showcase-y: 18px;
  --showcase-z: -75px;
  --showcase-angle: -27deg;
  --showcase-scale: .86;
  opacity: .98;
  filter: blur(1px);
}

main .services-section .vitrine-card[data-showcase-position="left-far"],
main .services-section.process-journey .journey-card[data-showcase-position="left-far"] {
  --showcase-y: 42px;
  --showcase-z: -180px;
  --showcase-angle: 58deg;
  --showcase-scale: .72;
  opacity: .9;
  filter: blur(2px);
}

main .services-section .vitrine-card[data-showcase-position="right-far"],
main .services-section.process-journey .journey-card[data-showcase-position="right-far"] {
  --showcase-y: 42px;
  --showcase-z: -180px;
  --showcase-angle: -58deg;
  --showcase-scale: .72;
  opacity: .9;
  filter: blur(2px);
}

main .services-section .vitrine-card[data-showcase-position="center"]:hover,
main .services-section .vitrine-card[data-showcase-position="center"]:focus-within {
  transform: translate3d(0, 0, 8px) scale(1.012);
}

@media (max-width: 760px) {
  main .services-section .service-grid {
    --showcase-near: 54vw;
    --showcase-far: 100vw;
  }
  main .services-section .vitrine-card[data-showcase-position="left-far"],
  main .services-section .vitrine-card[data-showcase-position="right-far"],
  main .services-section.process-journey .journey-card[data-showcase-position="left-far"],
  main .services-section.process-journey .journey-card[data-showcase-position="right-far"] {
    opacity: 0;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  main .services-section .vitrine-card {
    transition: none;
  }
}

/* El mismo lenguaje óptico en las demás tarjetas del Home. */
main .capability-card,
main .intro-section .principle {
  border: 1.5px solid rgba(255, 255, 255, .96) !important;
  box-shadow:
    0 11px 24px rgba(36, 40, 45, .07),
    0 3px 8px rgba(50, 54, 58, .035),
    inset 0 2px 2px rgba(255, 255, 255, .98),
    inset 0 -3px 8px rgba(255, 255, 255, .7) !important;
}

main .capability-card::before,
main .intro-section .principle::before {
  background:
    radial-gradient(ellipse 82% 14% at 50% 100%, rgba(255, 255, 255, .9), transparent 78%),
    linear-gradient(145deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .16) 55%, rgba(255, 255, 255, .38)) !important;
  backdrop-filter: blur(8px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(125%) !important;
}

main .capability-card::after,
main .intro-section .principle::after {
  background:
    linear-gradient(90deg, transparent 10%, rgba(255, 255, 255, .86) 50%, transparent 90%) bottom / 100% 3px no-repeat,
    linear-gradient(135deg, rgba(255, 255, 255, .44), transparent 30%, transparent 75%, rgba(255, 255, 255, .26)) !important;
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, .96),
    inset 2px 0 2px rgba(255, 255, 255, .62),
    inset -2px 0 2px rgba(255, 255, 255, .62),
    inset 0 -7px 12px rgba(255, 255, 255, .48) !important;
}

main .capability-card .capability-mockup,
main .capability-card:hover .capability-mockup,
main .capability-card:focus-within .capability-mockup {
  background: #F1F5F9;
}

main .intro-section .principle .principle-icon,
main .intro-section .principle:hover .principle-icon {
  background-image: url("assets/pillar-icons/glass-icons-source.png");
  background-repeat: no-repeat;
  background-size: 300% 100%;
}
main .intro-section .principle:nth-child(1) .principle-icon { background-position: left center; }
main .intro-section .principle:nth-child(2) .principle-icon { background-position: center center; }
main .intro-section .principle:nth-child(3) .principle-icon { background-position: right center; }

/* Tarjetas de las páginas de soluciones. Se conservan sus iconos y contenido. */
.product-info-card,
.product-step,
.product-highlight,
.product-integrations,
.product-ecosystem-grid > a {
  border: 1.5px solid rgba(255, 255, 255, .96) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .28) 58%, rgba(255, 255, 255, .5)) !important;
  box-shadow:
    0 10px 22px rgba(36, 40, 45, .07),
    0 3px 8px rgba(50, 54, 58, .035),
    inset 0 2px 1px rgba(255, 255, 255, .96),
    inset 0 -6px 10px rgba(255, 255, 255, .56) !important;
}

main .stack-group li {
  border: 1.5px solid rgba(255, 255, 255, .96) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .28) 58%, rgba(255, 255, 255, .5)) !important;
  backdrop-filter: blur(8px) saturate(125%);
  -webkit-backdrop-filter: blur(8px) saturate(125%);
  box-shadow:
    0 10px 22px rgba(36, 40, 45, .07),
    inset 0 2px 1px rgba(255, 255, 255, .96),
    inset 0 -6px 10px rgba(255, 255, 255, .56) !important;
}

main .stack-viewport {
  padding-top: 16px;
  padding-bottom: 30px;
  margin-top: -16px;
  margin-bottom: -30px;
}

main .services-section .vitrine-card[data-showcase-position="center"]:hover,
main .services-section .vitrine-card[data-showcase-position="center"]:focus-within,
main .capability-card:hover,
main .capability-card:focus-within,
main .intro-section .principle:hover,
main .intro-section .principle:focus-within,
.product-info-card:hover,
.product-info-card:focus-within,
.product-step:hover,
.product-step:focus-within,
.product-highlight:hover,
.product-highlight:focus-within,
.product-integrations:hover,
.product-integrations:focus-within,
.product-ecosystem-grid > a:hover,
.product-ecosystem-grid > a:focus-visible,
main .stack-group li:hover {
  border-color: #F1F5F9 !important;
  box-shadow:
    0 0 0 1px rgba(241, 245, 249, .92),
    0 0 12px 2px rgba(241, 245, 249, .84),
    0 0 26px 5px rgba(241, 245, 249, .52),
    0 10px 24px rgba(36, 40, 45, .07),
    inset 0 2px 2px #fff,
    inset 0 -5px 10px rgba(255, 255, 255, .8) !important;
}

@media (prefers-reduced-transparency: reduce) {
  main .services-section .vitrine-card::before,
  main .capability-card::before,
  main .intro-section .principle::before {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}