/* Compact mobile composition for the single, scroll-driven Process section. */
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-track {
  height: 200svh !important;
}

@media (max-width: 899px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-track {
    height: auto !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-escena::after {
    height: 90svh !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-cuerpo {
    box-sizing: border-box !important;
    top: var(--p-cab, 64px) !important;
    height: calc(100svh - var(--p-cab, 64px)) !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: clamp(222px, 40svh, 340px) auto !important;
    align-content: start !important;
    justify-items: stretch !important;
    row-gap: clamp(10px, 1.4svh, 14px) !important;
    padding-top: 10px !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-lamina {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 340px !important;
    margin: 0 !important;
    align-self: stretch !important;
    overflow: hidden !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-lamina img {
    width: 94% !important;
    height: 94% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-copia {
    grid-column: 1 !important;
    grid-row: 2 !important;
    max-width: none !important;
    align-self: start !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-titulo {
    width: 100% !important;
    margin: 0 0 8px !important;
    font-size: clamp(30px, 8vw, 38px) !important;
    line-height: .98 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-detalle {
    gap: clamp(8px, 1.4svh, 12px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-resumen-movil {
    max-width: 42ch !important;
    font-size: clamp(15px, 4vw, 17px) !important;
    line-height: 1.36 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-cta {
    display: inline-flex !important;
    min-height: 46px !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 10px 16px !important;
  }
}

@media (max-width: 899px) and (max-height: 680px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-cuerpo {
    grid-template-rows: clamp(202px, 40svh, 260px) auto !important;
    row-gap: 8px !important;
    padding-top: 8px !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-lamina {
    max-height: 260px !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-titulo {
    font-size: clamp(28px, 7.5vw, 34px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-resumen-movil {
    font-size: 14px !important;
    line-height: 1.32 !important;
  }
}

/* Keep the primary action visible with whichever of the four steps is active. */
html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-paso[data-estado="activo"] .proceso-cta {
  display: inline-flex !important;
  min-height: 46px !important;
  align-items: center !important;
  justify-content: center !important;
}

html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-paso:not([data-estado="activo"]) .proceso-cta {
  display: none !important;
}

@media (max-width: 899px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-paso[data-estado="activo"] .proceso-cta {
    justify-self: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 16px !important;
  }
}
