/* Ajustes de jerarquía y acabado del Home. Las ilustraciones conservan sus microetiquetas. */
main {
  --type-hero: clamp(48px, 5.5vw, 76px);
  --type-heading: clamp(36px, 4.3vw, 54px);
  --type-body: 16px;
  --type-card: 20px;
  --type-label: 12px;
  --glass-fill: linear-gradient(145deg, rgba(247,250,252,.9), rgba(221,233,241,.82) 60%, rgba(246,250,252,.9));
  --glass-edge: rgba(255,255,255,.88);
  --glass-shadow: 0 16px 36px rgba(30,47,77,.09), inset 0 1px 0 rgba(255,255,255,.94);
}

main .hero h1 { font-size: var(--type-hero); line-height: 1.04; }
main .section-heading h2, main .galaxy-copy h2, main .contact-copy h2,
main .process-section .section-heading h2 { font-size: var(--type-heading) !important; line-height: 1.08 !important; }
main .hero-copy, main .intro-lead, main .services-section .split-heading > p,
main .cases-description, main .galaxy-copy > p, main .process-intro-copy,
main .contact-copy > p { font-size: var(--type-body) !important; line-height: 1.6 !important; }
main .eyebrow, main .capability-heading .eyebrow, main .intro-pillars-heading .eyebrow,
main .galaxy-hint { font-size: var(--type-label); }
main .capability-result p, main .intro-section .principle-copy p,
main .services-section .vitrine-card p, main .process-section .process-card p,
main .faq-list details p { font-size: var(--type-body); line-height: 1.5; }
main .intro-section .principle-copy > b, main .services-section .vitrine-card h3,
main .process-section .process-card h3 { font-size: var(--type-card) !important; line-height: 1.25; }
main .faq-list summary, main .card-link { font-size: var(--type-body); }
main .hero .scroll-hint span::after { display: none; }

/* La misma superficie refractada en capacidades, servicios y pasos. */
main .capability-card, main .intro-section .principle { position: relative; }
main .capability-card, main .services-section .vitrine-card,
main .intro-section .principle, main .process-section .process-card {
  isolation: isolate;
  border: 1px solid var(--glass-edge) !important;
  box-shadow: var(--glass-shadow) !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
main .capability-card::before, main .services-section .vitrine-card::before,
main .intro-section .principle::before, main .process-section .process-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--glass-fill) !important;
  backdrop-filter: blur(6px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(112%) !important;
  pointer-events: none;
}
main .capability-card::after, main .services-section .vitrine-card::after,
main .intro-section .principle::after, main .process-section .process-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(125deg,rgba(255,255,255,.28),transparent 27%,transparent 74%,rgba(255,255,255,.14)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86) !important;
  pointer-events: none;
}
main .capability-card > *, main .services-section .vitrine-card > *,
main .intro-section .principle > *, main .process-section .process-card > * { position: relative; z-index: 1; }
main .services-section .vitrine-card[data-showcase-position] { filter: none !important; }
main .services-section .vitrine-card[data-showcase-position="center"] { opacity: 1; }
main .process-section .process-card.is-active { color: #1e2f4d !important; }

/* Herramientas en dos renglones: logos transparentes y chips fáciles de leer. */
main .stack-section { min-height: 0; padding: 66px 0 76px; }
main .stack-section-inner, main .capability-section { width: min(1180px, calc(100% - 48px)); }
main .stack-band { padding: 0; }
main .stack-band > p { margin: 0 0 28px; color: #355c7d; font-size: var(--type-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
main .stack-group { display: grid; grid-template-rows: repeat(2, 60px); grid-auto-flow: column; grid-auto-columns: max-content; gap: 16px 18px; align-items: center; padding: 8px 18px 18px 0; }
main .stack-group li { min-height: 60px; padding: 0 20px; gap: 12px; font-size: 14px; background: rgba(246,250,252,.76); border: 1px solid rgba(210,227,237,.9); box-shadow: 0 8px 22px rgba(30,47,77,.055), inset 0 1px 0 #fff; }
main .stack-mark, main .stack-group li.stack-google .stack-mark { width: 38px; height: 38px; flex: 0 0 38px; padding: 0; border: 0; border-radius: 0; background: transparent !important; box-shadow: none !important; }
main .stack-mark img, main .stack-group li.stack-google .stack-mark img { display: block; max-width: 100%; max-height: 100%; width: 36px; height: 36px; object-fit: contain; background: none !important; }
main .stack-group li.stack-google .stack-mark { width: 118px; flex-basis: 118px; }
main .stack-group li.stack-google .stack-mark img { width: 118px; }
main .stack-viewport { mask-image: linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent); -webkit-mask-image: linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent); }

/* Misma guía lateral desde las capacidades hasta los casos. */
main .capability-section { margin-top: 0; padding-top: clamp(54px,7vh,78px); padding-bottom: 64px; gap: 28px; }
main .capability-grid { gap: 24px; }
main .intro-section { padding-top: 90px; padding-bottom: 96px; }
main .services-section { padding-left: max(24px, calc((100vw - 1180px)/2)) !important; padding-right: max(24px, calc((100vw - 1180px)/2)) !important; }
main .cases-section { padding-top: 108px; padding-bottom: 108px; scroll-margin-top: 90px; }
main .cases-layout { align-items: center; }
main .process-section { padding-top: 104px; padding-bottom: 100px; }
main .capability-card, main .services-section .vitrine-card, main .process-section .process-card { -webkit-font-smoothing: antialiased; }

/* Cuatro capacidades y su rótulo deben caber juntos bajo la navegación. */
@media (min-width: 901px) {
  main .capability-section { gap: 16px; padding-top: 24px !important; padding-bottom: 24px !important; }
  main .capability-grid { gap: 16px 22px; }
  main .capability-card { min-height: 184px; padding: 14px; gap: 16px; }
  main .capability-mockup { height: 132px; padding: 10px; }
  main .capability-result strong { font-size: clamp(33px, 3vw, 39px); }
  main .capability-result p { margin-top: 7px; line-height: 1.4; }
}

@media (max-width: 900px) {
  main .services-section { padding-left: 24px !important; padding-right: 24px !important; }
  main .capability-section { padding-top: 58px; }
}
@media (max-width: 680px) {
  main { --type-hero: clamp(42px, 11vw, 54px); --type-heading: clamp(34px, 8.8vw, 46px); --type-body: 15px; --type-card: 18px; --type-label: 11px; }
  main .stack-section { padding: 48px 0 56px; }
  main .stack-section-inner, main .capability-section { width: calc(100% - 40px); }
  main .stack-group { grid-template-rows: repeat(2, 52px); gap: 12px; }
  main .stack-group li { min-height: 52px; padding: 0 14px; gap: 9px; font-size: 12px; }
  main .stack-mark, main .stack-group li.stack-google .stack-mark { width: 30px; height: 30px; flex-basis: 30px; }
  main .stack-mark img, main .stack-group li.stack-google .stack-mark img { width: 29px; height: 29px; }
  main .stack-group li.stack-google .stack-mark { width: 104px; flex-basis: 104px; }
  main .stack-group li.stack-google .stack-mark img { width: 104px; }
  main .capability-section { padding: 64px 0 56px; }
  main .capability-grid { gap: 18px; }
  main .intro-section, main .cases-section, main .process-section { padding-top: 74px; padding-bottom: 74px; }
  main .services-section { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (prefers-reduced-transparency: reduce) {
  main .capability-card::before, main .services-section .vitrine-card::before,
  main .intro-section .principle::before, main .process-section .process-card::before { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #e9f1f6 !important; }
}