/* Transformación Digital — vertical rhythm. Loaded only on /soluciones/transformacion-digital/, after the page's own
   stylesheets; every rule is scoped to this page's sections (td-*), so no approved page is affected. Content, animations
   and interactions are untouched.
   What made the page so tall (measured at 1366×768 and 1440×900):
   1. Section paddings stacked up: .td-eco 150/140 px, .td-impact and .td-apps 130/140, .td-arch 116/130, .td-capabilities
      110/120 — 250–290 px of empty space between consecutive sections.
   2. Two-column headers with the title in a 1.2fr column (~680 px) at up to 3.2rem: titles broke into 3–4 lines
      (Impacto's h2 was 213 px tall next to a 5-line intro).
   3. Header → component gaps of 54–64 px, and 96 px above Integración's sequence.
   4. The Antes/Después comparator at 16/8.4 over the full 1200 px (630 px tall) and the ecosystem photo at 9/4 (533 px).
   5. Capacidades reserved 720 px for its panels (digital-capabilities.css) while the default panel is 600 px.
   Desktop / laptop (≥1001 px) get the full adjustment; tablet and mobile keep their own layouts with a lighter padding. */

/* 1 · Section padding: still generous, but about a third less. */
.td-capabilities{padding:clamp(72px,7vw,100px) 0 clamp(72px,7vw,100px)}
.td-eco{padding:clamp(72px,7vw,104px) 0 clamp(64px,6.5vw,96px)}
.td-arch{padding:clamp(64px,6.5vw,96px) 0 clamp(72px,7vw,100px)}
.td-impact{padding:clamp(64px,6.5vw,96px) 0 clamp(72px,7vw,100px)}
.td-apps{padding:clamp(64px,6.5vw,96px) 0 clamp(72px,7vw,104px)}

@media (min-width:1001px){
  /* 2 · Headers: a wider title column and a slightly smaller (still dominant) title, so titles take two lines. */
  .td-eco-head,.td-arch-head,.td-impact-head,.td-apps-head{grid-template-columns:minmax(0,1.5fr) minmax(0,.75fr);gap:clamp(28px,4vw,64px)}
  .td-eco-head h2,.td-arch-head h2,.td-impact-head h2,.td-apps-head h2{font-size:clamp(2rem,2.9vw,2.6rem)}
  .td-capabilities .cap-heading{margin-bottom:clamp(32px,3.2vw,44px)}
  .td-capabilities .cap-tabs{margin-bottom:clamp(32px,3.2vw,44px)}
  /* The panels' reserved height (720 px) was taller than the default panel (600 px), leaving ~120 px empty under it; it
     now matches the default one (taller panels grow as the tallest one already did). */
  .cap-explorer.is-enhanced .cap-panels{min-height:600px}

  /* 3 · Header → component and inner gaps. */
  .td-eco-photo{margin-top:clamp(32px,3.4vw,44px)}
  .td-arch-diagram{margin-top:clamp(32px,3.4vw,44px)}
  .td-arch-seq{margin-top:clamp(40px,4.5vw,64px)}
  .td-impact-compare{margin-top:clamp(28px,3vw,40px)}
  .td-apps-stage{margin-top:clamp(32px,3.4vw,44px);row-gap:clamp(32px,3.4vw,44px)}

  /* 4 · Media proportions: a touch more panoramic, same full width. In Impacto the header and most of the comparator
     now share a typical laptop viewport (1366×768) without shrinking the component. */
  .td-impact .ba{aspect-ratio:16/7.4}
  .td-eco-photo{aspect-ratio:12/5}
}

/* Tablet and mobile: natural scrolling, only a lighter padding. */
@media (max-width:1000px){
  .td-capabilities{padding:72px 0}
  .td-eco,.td-arch,.td-impact,.td-apps{padding:64px 0 72px}
}
@media (max-width:600px){
  .td-capabilities{padding:60px 0}
  .td-eco,.td-arch,.td-impact,.td-apps{padding:56px 0 64px}
}