/* Pendientes de la revisión del 16 de octubre: una jerarquía y un vidrio consistentes. */
.capability-section {
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
  padding: clamp(38px, 5vh, 52px) 0 52px;
  gap: 20px;
  scroll-margin-top: 84px;
}

.capability-heading {
  position: relative;
  isolation: isolate;
  min-height: 40px;
  align-items: center;
}
.capability-heading .eyebrow { position: relative; z-index: 1; }

.capability-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 30px;
}
.capability-card {
  min-height: 220px;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 23px;
  --glass-optics: blur(0px) !important;
  --glass-blur: 6px;
  box-shadow: 0 14px 32px rgba(30,47,77,.075), inset 0 1px 0 rgba(255,255,255,.9);
}
.capability-card::before { z-index: 0; }
.capability-card::after { z-index: 0; }
.capability-card > .capability-mockup,
.capability-card > .capability-result { position: relative; z-index: 1; }
.capability-card:hover,
.capability-card:focus-within {
  box-shadow: 0 18px 38px rgba(30,47,77,.105), inset 0 1px 0 rgba(255,255,255,.9);
}
.capability-mockup {
  width: 100%;
  height: 166px;
  align-self: center;
  border: 1px solid rgba(255,255,255,.68);
}
.capability-result { margin-top: 0; padding: 0 4px 0 0; }
.capability-result strong { font-size: clamp(35px, 3.4vw, 43px); }
.capability-result p { color: #4c6174; font-size: 14px; line-height: 1.55; }

/* El vidrio refracta el fondo; el contenido permanece en una capa nítida. */
.services-section .service-card,
.intro-section .principle,
.process-section .process-card {
  --glass-optics: blur(0px) !important;
  --glass-blur: 6px;
  border-color: rgba(255,255,255,.85);
  box-shadow: 0 14px 32px rgba(30,47,77,.075), inset 0 1px 0 rgba(255,255,255,.9);
}
.services-section .service-card > *,
.intro-section .principle > *,
.process-section .process-card > * { position: relative; z-index: 1; }
.stack-group li {
  min-height: 54px;
  padding: 0 17px;
  font-size: 12px;
}
.stack-mark {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  background: transparent !important;
}
.stack-mark img { width: 28px; height: 28px; object-fit: contain; }
.stack-group li.stack-google .stack-mark img { width: 100%; height: 100%; }

/* La galería y los pasos usan el mismo contraste: las letras no reciben blur. */
main .services-section .vitrine-card::before,
main .services-section .vitrine-card[data-showcase-position="center"]::before {
  background: linear-gradient(145deg,rgba(222,229,236,.34),rgba(222,229,236,.58) 54%,rgba(222,229,236,.44));
  backdrop-filter: blur(6px) saturate(112%);
  -webkit-backdrop-filter: blur(6px) saturate(112%);
}
main .services-section .vitrine-card[data-showcase-position="center"] {
  box-shadow: 0 18px 40px rgba(30,47,77,.10);
}
main .services-section .software-main { gap: 4px; }
main .services-section .software-main strong { font-size: 7px; }
main .services-section .software-main span {
  display: block;
  height: auto;
  min-height: 11px;
  padding: 2px 4px;
  border-radius: 4px;
  background: #f0f5f8;
  color: #5a7081;
  font-size: 6px;
  line-height: 1.15;
}
main .services-section .web-stack span {
  color: #355c7d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -.04em;
}
main .services-section .vitrine-card[data-showcase-position="center"] .web-stack span { font-size: 14px; }
main .services-section .web-page {
  height: calc(100% - 12px);
  margin-top: 3px;
  padding: 10px;
  background: #f3f7fa;
}
main .services-section .web-page > strong {
  display: block;
  color: #355c7d;
  font-size: 10px;
  line-height: 1.2;
}
main .services-section .web-page-nav {
  margin-top: 5px;
  color: #8296a7;
  font-size: 6px;
}
main .services-section .web-page-cards { display: flex; gap: 6px; margin-top: 10px; }
main .services-section .web-page-cards span {
  position: static;
  display: grid;
  align-content: center;
  width: 50%;
  height: 42px;
  padding: 6px;
  border-radius: 6px;
  background: #fff;
}
main .services-section .web-page-cards b {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  background: none;
  color: #d39816;
  font-size: 12px;
  line-height: 1;
}
main .services-section .web-page-cards small { color: #7890a1; font-size: 6px; }
main .services-section .ai-logos { gap: 5px; }
main .services-section .ai-logos span,
main .services-section .vitrine-card[data-showcase-position="center"] .ai-logos span {
  width: auto;
  min-width: 57px;
  height: 37px;
  padding: 5px;
  color: #42627d;
  font-size: 7px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.process-section .process-card,
.process-section .process-card.is-active {
  border: 1px solid rgba(255,255,255,.86) !important;
  background: linear-gradient(145deg,rgba(246,250,253,.94),rgba(224,233,240,.88) 70%,rgba(247,250,252,.94)) !important;
  color: #1e2f4d !important;
  box-shadow: 0 16px 36px rgba(30,47,77,.10), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.process-section .process-card::before {
  background: linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.09) 55%,rgba(255,255,255,.2)) !important;
  backdrop-filter: blur(6px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(112%) !important;
}
.process-section .process-card::after { background: linear-gradient(120deg,rgba(255,255,255,.26),transparent 75%,rgba(255,255,255,.12)) !important; }
.process-section .process-card h3 { color: #1e2f4d !important; }
.process-section .process-card p { color: #50657a !important; }
.process-section .process-card-foot { color: #687e91; }
.process-section .section-heading h2 {
  font-size: var(--home-title) !important;
  line-height: 1.06 !important;
}
.process-section .process-intro-copy {
  font-size: var(--home-copy) !important;
  line-height: 1.6 !important;
}

@media (max-width: 1050px) {
  .capability-grid { gap: 18px; }
  .capability-card { display: flex; flex-direction: column; align-items: stretch; min-height: 322px; gap: 16px; }
  .capability-mockup { height: 156px; }
  .capability-result { margin-top: auto; }
}
@media (max-width: 680px) {
  .capability-section { width: 100%; padding: 64px 20px 56px; gap: 20px; }
  .capability-grid { grid-template-columns: 1fr; gap: 16px; }
  .capability-card { min-height: 0; padding: 16px; }
  .capability-mockup { height: 160px; }
  .capability-result { padding: 0 2px 2px; }
  .intro-section .principle-copy p { font-size: 13px; line-height: 1.45; }
  .process-section .section-heading h2 { font-size: clamp(34px, 9vw, 47px) !important; }
  .stack-group li { min-height: 48px; padding: 0 13px; font-size: 11px; }
  .stack-mark { width: 29px; height: 29px; flex-basis: 29px; }
  .stack-mark img { width: 25px; height: 25px; }
}