/* ===================================================
       VARIÁVEIS DE CORES (Identidade Visual MWX)
       =================================================== */
      :root {
        --mwx-dark: #0f172a;
        /* Tom escuro para títulos */
        --mwx-accent: #4f46e5;
        /* Cor da linha e detalhes (Azul/Roxo MWX) */
        --mwx-text-body: #475569;
        /* Cor dos parágrafos */
        --mwx-bg-section: #ffffff;
        /* Fundo da seção */
      }

      /* ===================================================
       ESTILOS GERAIS DA SEÇÃO
       =================================================== */
      .mwx-turnkey-section {
        background-color: var(--mwx-bg-section);
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
        overflow: hidden;
        /* Evita vazamento dos elementos flutuantes */
      }

      .text-dark-mwx {
        color: var(--mwx-dark);
      }

      .text-accent-mwx {
        color: var(--mwx-accent);
      }

      .text-secondary-mwx {
        color: var(--mwx-text-body);
        line-height: 1.7;
      }

      /* Linha decorativa abaixo do título (igual ao layout de referência) */
      .accent-line {
        width: 70px;
        height: 4px;
        background-color: var(--mwx-accent);
        border-radius: 2px;
      }

      /* Ajustes da Imagem Principal */
      .main-img {
        border-radius: 24px !important;
        object-fit: cover;
        max-height: 460px;
      }

      /* ===================================================
       CARDS FLUTUANTES (MÉTRICAS DA MWX)
       =================================================== */
      .metric-card {
        z-index: 2;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }

      .metric-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12) !important;
      }

      .metric-icon {
        width: 42px;
        height: 42px;
      }

      /* Posições dos Cards sobre a Imagem */
      .card-top-right {
        top: -20px;
        right: -15px;
      }

      .card-mid-left {
        top: 45%;
        left: -25px;
      }

      .card-bottom-right {
        bottom: -20px;
        right: 20px;
      }

      /* ===================================================
       RESPONSIVIDADE (Dispositivos Móveis e Tablets)
       =================================================== */
      @media (max-width: 991.98px) {
        .card-top-right {
          top: 10px;
          right: 10px;
        }

        .card-mid-left {
          top: auto;
          bottom: 70px;
          left: 10px;
        }

        .card-bottom-right {
          bottom: 10px;
          right: 10px;
        }
      }

      @media (max-width: 575.98px) {

        /* No celular, os cards alinham verticalmente após a imagem */
        .metric-card {
          position: static !important;
          margin-top: 12px;
        }
      }